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

Question

我有一个带有<div> 的AngularJS 1.2.2 Web 应用程序，我根据一些$scope 属性显示/隐藏它。使用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 声明即可。