CODEWITHSUNDEEP
css
coure2011
coure2011

Reputation: 42474

css3 slide up, jerky animation of the content under it

Following a book's code for slide up/down animation using anglularjs here is the example 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 when the content is slide up/down the content under it moved up/down with a jerk. How to fix a css3 slide up/down so that the content under it also moves smoothly?

Upvotes: 5

Views: 1738

Answers (2)

Samuel MacLachlan
Samuel MacLachlan

Reputation: 1746

I had a look at your example, but did not see any jerkiness that you were referring to. I have had this symptom many a time however, in various sites I have built.

I have often found that depending on which device I am viewing my site on, which browser I'm using, and what else is going on, CSS3 animations can appear jerky.

Possible Causes

Browser/Hardware Performance

Most web browsers are fine for common transitions and animations. Some however, freak out and start jerking when animating either a large amount of screen real estate or elements.

CSS doesn't seem to have caught up to JavaScript for animations in some performance aspects yet.

Animation Speed

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

If its too slow, it will look jerky. The speed of your animation looks perfect however, and I didn't experience any issues.

JavaScript

If JavaScript is also trying to perform animations on the same element as the CSS, I have seen this make animation on the element jerky as JS and CSS fight over who is doing the animating.

Possible Solutions

  • Ensure you aren't running too many CSS animations on-screen at the same time.
  • Try viewing the animation on a different device.
  • If the element is being animated by JavaScript as well, try and change it so that only the CSS (or JS if pref) is doing the animation.

Upvotes: 0

neptune
neptune

Reputation: 154

Why not use simple JavaScript/jQuery?

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

It fixes the "jerky" issue, although it doesn't 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");
  });
});

Upvotes: 1

Related Questions