I recently implemented a CSS3 transition on a <div> element that is meant to toggle when clicked. I successfully achieved the desired transition on even clicks using jQuery's .toggleClass method, but I am struggling with smoothly reverting back to the original state on odd clicks.
Essentially, I am looking to have the <div> rotate back to its normal position and smoothly return to its original coordinates (using the top property) on odd click events, mirroring the smoothness of the animation on even clicks.
You can view a live demo in this FIDDLE
Here is my code :
HTML :
<div></div>
CSS :
div {
width:300px;
height:100px;
border-radius:2px;
background:gold;
position:absolute;
left:40px;
top:50%;
margin-top:-1px;
}
div.anim {
top:30%;
-webkit-transform: rotate3d(0, 0, 1000, 45deg);
-moz-transform: rotate3d(0, 0, 1, 45deg);
-ms-transform: rotate3d(0, 0, 1, 45deg);
-o-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1000, 45deg);
-webkit-transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
-moz-transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
-webkit-transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.5s;
-moz-transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.25s;
transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.25s;
}
JS :
$(document).ready(function () {
$('div').click(function () {
$(this).toggleClass('anim');
});
});