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/

它修复了“不稳定”的问题，尽管它不使用 Angular。希望这可以帮助！

超文本标记语言

<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");
  });
});