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

只需像这样给你的<ul>上课。

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

Working Demo

Answer 2

实际上，代码存在一些可能的问题：

您在ngRepeat上使用<ul>（我不能100％确定这不是您想要的，但这是非常不可能的）。 ngRepeat将“重复”（克隆“它所在的元素，因此在您的情况下，您正在创建多个<ul>元素（而不是多个<li>元素，正如人们所期望的那样。”登记/> 移动ngRepeat o <li>将解决动画问题，并产生预期的HTML代码（1 <ul>，多个<li>）。
您的CSS定义了每个类的转换，而定义一个规则就足够了：

.top.ng-enter，.top.ng-leave { // ...在这里定义转换 }
为了避免可能的CSS特性问题（尤其是稍后，当CSS的大小和复杂性增加时），您应该在.ng-enter/leave的规则中包含.ng-*-active类选择器：

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

//你应该使用： .top.ng-enter.enter-active {...
最后，您可以将相同的规则组合在一起，以节省空间并使代码更加干燥（例如.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 。

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

2 个答案: