css - `ng-hide` - 动画如何防止隐藏时跳转？

Question

我正在尝试通过面板高度使用 ng-hide 制作 Accordion 动画。但是我在应用 ng-hide 时发现了一个跳跃。 (点击第一个标题显示和隐藏)

有人帮我解决这个问题吗？

这是我的 CSS 代码:

.animate-show{
  border:2px solid gray;
  padding: 10px;
  background:green;
}

.animate-show.ng-hide {
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  padding: 0;
  height:0;

}

Live Demo

Answer 1

您需要移除 .animate-show.ng-hide 类中绿色内容 div 和后续切换 div 之间的边距。您可以通过为此类设置负 margin-bottom 样式来做到这一点:

h1{
  background:gray;
  cursor:pointer;
}

.animate-show{
  border:2px solid gray;
  padding: 10px;
  background:green;
  overflow:hidden;
}

.animate-show.ng-hide-add{
  transition: all linear 0.5s;
}

.animate-show.ng-hide-remove
{
  transition: all linear 0.5s;
}


.animate-show.ng-hide {
  line-height: 0;
  padding: 0;
  height:0;
  margin-bottom:-21px;
}

这是 Plunker:http://plnkr.co/edit/XQ4p8uE47QxQbDKUiIyi?p=preview