How to seamlessly transition between classes using jQuery
How do I make the transition between classes smooth and not the shaky effect you see here: http://codepen.io/Cogarius/pen/tfhgx
The box shakes a lot due to the differences in widths and heights along with the border size changes that the classes go through.
HTML:
<div class="outer">
<div class="original"></div>
</div>
CSS
.original {
float: left;
height: 0;
width: 0;
background: #ffffff;
border: 150px solid #000000;
margin: 0px;
}
.changed {
float: left;
height: 296px;
width: 296px;
border: 2px solid #ff3333;
background: #ffffff;
margin: 0px;
}
JQuery
$(document).ready(function(){
$('.original').on('click', function(){
$(this).toggleClass( "changed", 500, "easeOutQuad" );
});
});
source to share
There are several ways to approach this problem (and the good news: they are all useless: D)
Box shadow
One trick is to use field shadows to your advantage. For resting state, you make sure that the box shadow (inset) fills the full size of your box. For a toggle state, you reset the window shadow by decreasing the spread radius as well as changing its color. Demo CodePen
.original {
height: 300px;
width: 300px;
background: #fff;
box-shadow: inset 0 0 0 150px #000000;
position: relative;
transition: all .5s ease-in-out;
}
.changed {
box-shadow: inset 0 0 0 2px #ff3333;
}
One caveat: you need to specify the spread radius (fourth number) in pixel values ââ... so if you are using a pickup this could be a problem.
Another problem I can foresee is that since the propagation radius must be in pixel values, it can still show jitter as slow transition speeds. For a complete jitter-free transition, I can only recommend using the CSS3 2D Transforms, which we will need to use the pseudo-elements (see next solution).
Pseudo-elements
This trick is to use a pseudo element eg. ::before
, on the container and then scale it when switching classes. Under all states, the container has a black background with a 2px black border. The pseudo-element is absolutely centered and fills the width and height of its parents, but at rest it scales to 0 (i.e. no size). In the rearranged state, we reduce it to its original size. Demo CodePen
.original {
box-sizing: border-box;
height: 300px;
width: 300px;
background:#000;
border: 2px solid #000;
position: relative;
transition: all .5s ease-in-out;
&::before {
background-color: #fff;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition: all .5s ease-in-out;
transform: scale(0);
}
}
.changed {
background-color: #ff3333;
border-color: #ff3333;
&::before {
background-color: #fff;
transform: scale(1);
}
}
Please note that I used:
- Property
box-sizing
, so the declared width is the final dimensions - The transition color of the parent's border as well as the background color of the pseudo-element.
source to share
Changing values width
and height
causes this situation. If you want a smooth transition, you need to use hardware accelerated conversion css, such as scale
, translateX
, translateY
, etc.
Here's a more descriptive article about it.
source to share