angularjs - 告诉 ngAnimate 只为 ngShow/ngHide 设置动画

Question

我有一个带有 <div> 的 AngularJS 1.2.2 Web 应用程序我根据一些 $scope 显示/隐藏属性(property)。使用 ngAnimate模块，我动画显示和隐藏<div> .

<div id="square" ng-show="showSquare" class="animate-shiny"></div>

我还有一门课我想在这个 <div> 上放置为此我使用 ngClass .

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

碰巧的是，有时该类会在 <div> 的同时应用。显示/隐藏。这会导致显示/隐藏动画不再起作用，显然它会找到 ngClass动画更有趣，即使我不想使用 ngAnimate对于那个动画。

Here's a Plnkr that demonstrates the behavior .单击显示/隐藏按钮效果很好，单击制作酷按钮效果很好，但是结合这两者的按钮会导致显示/隐藏动画中断。

我该如何解决？我可以在不手动寻址的情况下做到吗 $animate ?

提前致谢!

Answer 1

问题是您正在尝试使用该类进行动画处理，而不是区分何时应该进行动画处理。也就是说，您的过渡效果通常适用于类，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，您可以使用它: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview

如果您只想为显示/隐藏设置动画并且不想要颜色过渡，只需将过渡移动到 #square.ng-hide-add, #square.ng-hide-remove宣言。