How to create a CSS3 transitions based switch effect

  Read comments...

Summary
A guide for creating a CSS3 transitions based switch effect that allows you to switch between two charts

[No canvas support] [No canvas support]

This is an example of how you can create a quick and simple switching effect between two charts (though you could add more charts if required) using CSS3 transitions for the animation effect.

It works by adding a CSS transition property to the canvas tag so that any property changes will be animated - and then when the canvas is clicked the properties are changed. The width and height of the front canvas are set to zero, the top and left are set to the half way points so that it will shrink to the center, and the opacity is set to zero so that it fades out whilst it transitions. There's also a transform property that makes the canvas tags rotate when they transition.

The opposite is applied to the rear canvas so that it comes to the front. The effect here is triggered by a click on the canvas, but could equally be triggered by a button or link.

1. The HTML that adds the canvas tags to the document

This is the HTML for the effect. All it is is two canvas tags in a DIV tag - one behind the other.

<div id="container">
    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
</div>

2. The CSS to achieve the transition effect between the canvas tags

This is the CSS that is necessary to create the effect. Note that to achieve the animation you only have to specify the transition property - whenever properties are changed (eg width, height, opacity, transform) the browser will do the intermediate animation automatically.

<style>

    //
    // This gets applied to the container DIV that contains the two
    // canvas tags
    //
    div#container {
        position: relative;
        width: 600px;
        height: 250px;
        float: left;
    }
    
    //
    // This gets applied to both of the canvas tags. It's things
    // which are common to both of the tags
    //
    div#container canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 600px;
        height: 250px;
        background-color: white;
        transition: all 1s;
        opacity: 1;
    }
    
    //
    // Initially the first canvas tag (the one at the "back") is hidden,
    // positioned in the center and has no width or height. This means
    // that it rotates and fades in when the charts are first clicked
    //
    div#container canvas#cvs1 {
        top: 125px;
        left: 300px;
        width: 0;
        height: 0;
        opacity: 0;
        transform: rotate(90deg);
    }
</style>

3. The JavaScript that creates the charts and switches them in the click event

The charts are created on the jQuery ready event and then a click handler for the two canvas tags is added that switches the canvas tags depending on which is visible.

<script>
    window.onload = (function ()
    {
        //
        // Create the Bar chart. It only gets drawn once - the canvas tags
        // are hidden/shown using CSS (which doesn't result in the canvas
        // tag getting cleared) so the chart doesn't need to be repeatedly
        // drawn.
        //
        var bar = new RGraph.Bar({
            id: 'cvs1',
            data: [4,8,12],
            options: {
                colors: ['#5690C9'],
                hmargin: 25,
                strokestyle: 'transparent',
                axisLinewidth: 15,
                textSize: 16,
                textColor: '#999',
                titleSize: 12,
                numyticks: 0,
                numxticks: 0,
                noxaxis: true,
                noyaxis: true,
                shadow: false,
                title: 'A Bar chart (click to switch to the Line chart)',
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                textAccessible: false
            }

        }).draw();


        //
        // Create the Line chart. It only gets drawn once - the canvas tags
        // are hidden/shown using CSS (which doesn't result in the canvas
        // tag getting cleared) so the chart doesn't need to be repeatedly
        // drawn.
        //
        var line = new RGraph.Line({
            id: 'cvs2',
            data: [
                [1,6,4],
                [5,3,8]
            ],
            options: {
                colors: ['#B71A1A','#54A4CF'],
                tickmarks: function myTick (obj, data, value, index, x, y, color, prevX, prevY)
                {
                    // An RGraph function
                    RGraph.path2(obj.context, ['b', 'a',x, y, 15, 0, 2 * Math.PI, false, 'f', color]);
                    
                },
                linewidth: 10,
                shadow: false,
                labels: ['John','Fred','Lucy'],
                title: 'A Line chart (click to switch to the Bar chart)',
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                noxaxis: true,
                hmargin: 25,
                textSize: 16,
                textColor: '#999',
                titleSize: 12,
                axisColor: '#999',
                textAccessible: false
            }
        }).draw();
    });

    //
    // The click handler is applied to both canvas tags using jQuery
    //
    $('canvas').click(function (e)
    {
        // Get the ID of whatever canvas has been clicked
        var id = e.target.id;

        //
        // If the canvas tag that has the cvs1 ID has been clicked do this. It uses
        // jQuery to change th CSS properties of the canvas tags - namely the
        // position, dimensions the opacity and the transform. No animation
        // is stipulated here - that is handled by the CSS transition property
        //  that was defined above.
        //
        if (id === 'cvs1') {
            $('#cvs1').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(90deg)'
            });

            $('#cvs2').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });



        //
        // If the canvas tag that has the cvs1 ID has been clicked do this. It uses
        // jQuery to change th CSS properties of the canvas tags - namely the
        // position, dimensions the opacity and the transform. No animation
        // is stipulated here - that is handled by the CSS transition property
        // that was defined above.
        //
        } else {
            $('#cvs2').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(90deg)'
            });

            $('#cvs1').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });
        }
    });
</script>

Related links

Share RGraph
X

Comments