css - 使用angularjs将CSS动画应用于特定的html元素

Question

请先查看plnkr上的演示.

我的问题是:此动画将应用于 html 中的所有元素，原因在 css 中被定义为 .ng-enter .ng-leave 等。

我正在尝试将它应用于特定的类名。就我而言，它是 <li class="specific">

在 CSS 中，我尝试了以下方法:

.specific.ng-enter /*(does not work)*/
.specific-ng-enter /*(does not work)*/

使用上面的这些代码，我可以添加和删除元素但没有动画。

代码在css中应该怎么写？

Answer 1

实际上，代码有几个可能的问题:

1. 您正在使用 ngRepeat在你的 <ul> (我不能 100% 确定这不是您想要的，但这是极不可能的)。 ngRepeat将“重复”(克隆)它所在的元素，因此在您的情况下，您正在创建多个 <ul> 元素(而不是人们所期望的多个 <li> 元素)。
   搬家ngRepeat o <li>将解决动画问题并生成预期的 HTML 代码(1 个 <ul> ，多个 <li> )。

2. 您的 CSS 定义了每个类的过渡，而定义一个规则就足够了:

   .top.ng-进入，.top.ng-离开{ //...在这里定义转换

3. 为了避免可能出现的 CSS 特异性问题(尤其是稍后，当您的 CSS 的大小和复杂性增加时)，您应该包含 .ng-enter/leave规则中的类选择器 .ng-*-active :

   //而不仅仅是:.top.ng-enter-active {...

   //你应该使用:.top.ng-enter.enter-active {...

4. 最后，您可以将相同的规则组合在一起，以节省空间并使您的代码更加 DRY(例如 .top.ng-enter 规则 === .top.ngleave.ng-leave-active 规则)。

---

您的最终代码应如下所示:

<!-- HTML -->
<ul>
  <li class="top" ng-repeat="item in items">{{item}}</li>
</ul>

/* CSS */
.top.ng-enter,
.top.ng-leave {
  -webkit-transition: 1s;
  transition: 1s;
}

.top.ng-enter,
.top.ng-leave.ng-leave-active {
  margin-left: 100%;
}

.top.ng-enter.ng-enter-active,
.top.ng-leave {
  margin-left: 0;
}

另请参阅此 short demo .