Css3 slide up, jerky animation of content below it

Question

Below is the book code for animating up / down slides using anglularjs, here is a sample code: http://jsfiddle.net/bx01muha/2/

here is the css code:

.container { overflow: hidden; } .slide-tile { transition:all 0.5s ease-in-out; width:300px; text-align:center; border: 1px solid black; transform: translateY(0); } .slide-tile.ng-hide { transform: translateY(-100%); } 

The problem is that the content moves up / down along the content below it up / down with a jerk. How to fix css3 slide up / down so that the content below it also moves smoothly?

Answer 1

Why not use plain JavaScript / jQuery?

Here is my solution: http://codepen.io/n3ptun3/pen/EVJzPv/

It fixes a "jerky" problem, although it does not use Angular. Hope this helps!

HTML

 <div> <div> <button> Toggle Visibility </button> <div class="container"> <div class="slide slide-tile"> Slide me up and down! lets see whats going on... </div> </div> <h1 class="slide">Jerky</h1> </div> </div> 

CSS

 .container { overflow: hidden; } .slide-tile { transition:all 0.5s ease-in-out; width:300px; text-align:center; border: 1px solid black; transform: translateY(0); } .hide { transform: translateY(-100%); } h1 { transition: all 0.5s ease-in-out; } 

Javascript / jquery

 $(function(){ $("button").click(function(){ $(".slide").toggleClass("hide"); }); }); 

Answer 2

I looked at your example, but did not see any insolence that you spoke of. I have had this symptom many times, however, on different sites that I built.

I often found that depending on which device I’m browsing my site on, which browser I’m using, and what else is happening, CSS3 animations may seem jerky.

Possible reasons

Browser / Hardware Performance

Most web browsers are great for general transitions and animations. Some, however, get worried and start jerking off while animating a large amount of screen real estate or elements.

CSS does not seem to have caught up with JavaScript for animation in some aspects of performance yet .

Animation speed

Animation speed can be a factor in both the actual animation speed (directly affects the twitching) and browser performance.

If it is too slow, it will look jerky. However, the speed of your animation looks perfect, and I have not experienced any problems.

Javascript

If JavaScript also tries to animate on the same element as the CSS, I saw how it created the animation on the jerky element, as JS and CSS are fighting over whoever is doing the animation.

Possible solutions

• Make sure you don't run too many CSS animations on the screen at the same time.
• Try watching the animation on another device.
• If the element is also animated by JavaScript, try and modify it so that the animation only performs CSS (or JS if pref).