css3向上滑动，其下内容的不稳定动画

下面是一本书中使用anglularjs进行上/下滑动动画的代码示例代码：

以下是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上下滑动，使其下的内容也能平稳移动？

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

以下是我的解决方案：

它修复了“抖动”问题，尽管它不使用角度。希望这有帮助

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>

JavaScript/jQuery

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

---

我看了你的例子，但没有看到你所指的任何急躁。我有过这种症状很多次，但是，在我建立的各种网站

我经常发现，根据我在哪个设备上查看我的站点，使用哪个浏览器，以及其他情况，CSS3动画可能会显得不稳定

可能原因 浏览器/硬件性能 大多数web浏览器都适用于常见的过渡和动画。然而，当为大量屏幕不动产或元素设置动画时，有些人会发疯并开始抓狂

CSS在某些性能方面似乎还没有赶上JavaScript

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

如果它太慢，它会看起来很不稳。你的动画速度看起来很完美，但是，我没有遇到任何问题

JavaScript 如果JavaScript也试图在与CSS相同的元素上执行动画，那么我已经看到，当JS和CSS争夺谁在做动画时，这会使元素上的动画变得不稳定

可能的解决方案

• 确保您不会同时在屏幕上运行太多CSS动画
• 尝试在其他设备上查看动画
• 如果元素也由JavaScript设置动画，请尝试并更改它，以便只有CSS（或JS，如果是pref）在执行动画

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