css3向上滑动，下面的内容生涩动画

Question

以下是使用anglularjs进行上下滑动动画的书籍代码示例代码：http://jsfiddle.net/bx01muha/2/

这是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);
}
.slide-tile.ng-hide {
    transform: translateY(-100%);
}

问题是，当内容向上/向下滑动时，内容会随着上下移动一下。如何修改css3幻灯片上/下以使其下的内容也能顺利移动？

Answer 1

为什么不使用简单的JavaScript / jQuery？

这是我的解决方案：http://codepen.io/n3ptun3/pen/EVJzPv/

它修复了＆＃34;生涩＆＃34;问题，虽然它没有使用Angular。希望这有帮助！

<强> 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

我看了你的例子，但没有看到你所指的任何急躁。我在很多时候都遇到过这种症状，在我建立的不同地点。

我经常发现，根据我在哪个设备上查看我的网站，我正在使用哪个浏览器，以及还有什么，CSS3动画会显得生涩。

可能的原因

浏览器/硬件性能

大多数网络浏览器适用于常见的过渡和动画。然而，有些人在为大量的屏幕空间或元素制作动画时会惊慌失措并开始抽搐。

CSS在某些性能方面尚未似乎没有赶上JavaScript动画。

动画速度

动画速度可以是实际动画速度（直接影响急动）和浏览器性能的一个因素。

如果它太慢，它会显得生涩。然而，动画的速度看起来很完美，我没有遇到任何问题。

的JavaScript

如果JavaScript也试图在与CSS相同的元素上执行动画，我已经看到这个元素生涩的动画，因为JS和CSS争论谁在做动画。

可能的解决方案

• 确保您没有同时在屏幕上运行太多CSS动画。
• 尝试在其他设备上查看动画。
• 如果元素也被JavaScript动画化，请尝试更改它，以便只有CSS（或JS，如果是pref）正在进行动画。