HOWTO: Create a CSS3 switch effect
- Introduction
- Example
- The HTML that adds the canvas tags to the document
- The CSS to achieve the transition effect between the canvas tags
- The JavaScript that creates the charts and switches them in the click event
Introduction
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 halfway 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.
Example
There's a live example of this technique on this demo page. This demo page is included in the download archive so you can run it on your own computer at your own leisure!
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>
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
* that 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>
The JavaScript that creates the charts and switches them in the click event
The charts are created in the window.onload 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'],
marginInner: 25,
colorsStroke: 'transparent',
axesLinewidth: 15,
textSize: 16,
textColor: '#999',
titleSize: 12,
xaxis: false,
yaxis: false,
shadow: false,
title: 'A Bar chart (click to switch to the Line chart)',
backgroundGridVlines: false,
backgroundGridBorder: 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'],
tickmarksStyle: function myTick (obj, data, value, index, x, y, color, prevX, prevY)
{
// An RGraph function
RGraph.path(obj.context, ['b', 'a',x, y, 15, 0, 2 * Math.PI, false, 'f', color]);
},
linewidth: 10,
shadow: false,
xaxisLabels: ['John','Fred','Lucy'],
title: 'A Line chart (click to switch to the Bar chart)',
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
marginInner: 25,
textSize: 16,
textColor: '#999',
titleSize: 12,
axesColor: '#999'
}
}).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 the CSS properties of the canvas tags - namely the
// position, dimensions, 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 the CSS properties of the canvas tags - namely the
// position, dimensions, 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>