Question

我正试图通过面板高度使用ng-hide进行手风琴动画。但是我在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

您需要删除绿色内容div与.animate-show.ng-hide类中后续切换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

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

1 个答案: