Question

我使用Angular来隐藏/显示无序列表的项目。由于效果有点太快，用户无法注意到li的消失/外观，我想在高度上添加一个过渡。

li {
  transition: height 1s linear;
  overflow: hidden;
}

li.ng-hide {
  height: 0;
}

这就是我的问题所在：转换不会影响li，除非我设置了一个我不想要的高度，因为我不知道它们有多大。< / p>

Here is a plunker to illustrate that.我已经在li和div上进行了测试，我也尝试过没有Angular，这似乎不是负责人。

如何在不设置元素高度的情况下使转换工作？

Answer 1

我过去曾遇到过同样的问题，并且发现你必须设置高度，这是为了过渡计算需要发生的事情。我设法解决问题的两种方法：

CSS方式：

li {
  transition: max-height 1s linear;
  overflow: hidden;
  max-height: 500px; // Any value above what you expect to be the biggest
}

li.ng-hide {
  max-height: 0;
}

上述方法有两个缺点，一个是你需要知道一个上限，另一个是动画会略有跳跃。更好的方法可能是使用javascript计算高度：

**来自JQUERY的更新**

var listItems = document.getElementsByTagName("li")

for (var i = 0; i < listItems.length; i++) {
  listItems[i].style.height = listItems[i].clientHeight + 'px';
}

然后你需要css：

li.ng-hide {
  height: 0 !important;
}

覆盖样式属性。以下是此示例的pen，其中包含一些额外内容以说明解决方案。

Answer 2

只需按照 DEMO PLNKR 中的public function store(Request $request) { $this->validate($request,array( 'nim' =>'required', 'matkul' =>'required', 'hari' =>'required', 'status' =>'required' )); //store in database $post = new PostAbsensi; $post->nim = $request->mahasiswasn; $post->mk = $request->matkulsn; $post->hari = $request->hari; $post->status = $request->status; $post->save(); Session::flash('success','data successfully saved!'); return redirect()->route('absensi.show', $post->id); }而不是max-height设置动画即可。这样，您就可以在height和0属性之间拥有元素的动态高度。没有需要jQuery 。您应该避免在AngularJS应用程序中使用jQuery或直接DOM注入。

max-height

Answer 3

您不一定需要设置高度转换。您可以在ng-hide或ng-show属性中进行设置。

以下是此功能的示例：

https://plnkr.co/edit/pD4sQNGqpqrINJlZwE3q?p=preview

只需将类指定给要设置动画的元素即可。

.animate.ng-hide-add,
.animate.ng-hide-remove {
  transition: all linear 2s;
}

您可以在此处找到更多信息：https://docs.angularjs.org/api/ng/directive/ngShow

nb：您可以在css中分离ng-hide-add和ng-hide-remove的动画。当然。

希望它有所帮助！

AngularJS：使用css过渡动画制作li-hide / ng-show高度

3 个答案: