Angularjs 告诉ngAnimate仅为ngShow/ngHide设置动画

我有一个AngularJS 1.2.2 web应用程序，它有一个

，我根据一些

$scope

属性显示/隐藏它。使用

ngAnimate

模块，我为

的显示和隐藏设置了动画

有时，该类会在显示/隐藏

的同时应用。这导致“显示/隐藏”动画不再工作，很明显，它发现

ngClass

动画更有趣，尽管我不想对该动画使用

ngAnimate

。单击“显示/隐藏”按钮效果很好，单击“使酷”按钮效果很好，但是组合这两个按钮会导致显示/隐藏动画中断

我该如何解决这个问题？我可以不用手动寻址

$animate

来完成吗

---

提前谢谢

问题在于，您试图使用该类设置动画，而不区分什么时候应该设置动画。也就是说，过渡效果通常适用于该类，ng animate认为该类在引用该类时必须执行工作。我对您的css进行了一些修改，使其与您想要的内容非常接近（如果不是确切的话）：

#square {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.4s all ease-out;
}

#square.cool {
  box-shadow: 0 0 10px 3px green;
  background-color: lightgreen;
}

#square.ng-hide-add, #square.ng-hide-remove
{
  display: block !important; 
}

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
  margin-left: -80px;
    opacity: 0;
}

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
  margin-left: 0;
    opacity: 1;
}

这是新的plunkr，您可以使用它：

---

如果您只想为显示/隐藏设置动画，而不想为颜色设置过渡，只需将过渡移动到

#square.ng-hide-add、#square.ng hide-remove

声明。

这真是太好了！请参阅“用法”部分的文档，在列出的指令下，它说：“您可以在访问每个指令页面时找到有关动画的更多信息。”-在这里，您可以找到特定于指令的类名来触发更具体的动画。虽然这对我来说是可用的，但仍然存在一些奇怪的行为。如果我将动画速度降低到4秒，然后显示正方形（第一个按钮），然后应用这两个更改（最后一个按钮），我看不到任何动画效果。我的方块使用

ng animate

设置动画，但是

.cool

类不再应用于动画。我不知道为什么，转换定义正确。。。

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>

#square {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.4s all ease-out;
}

#square.cool {
  box-shadow: 0 0 10px 3px green;
  background-color: lightgreen;
}

#square.ng-hide-add, #square.ng-hide-remove
{
  display: block !important; 
}

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
  margin-left: -80px;
    opacity: 0;
}

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
  margin-left: 0;
    opacity: 1;
}