12

我有一个 AngularJS 1.2.2 Web 应用程序<div>，我根据某些$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用于该动画。

这是一个演示行为的 Plnkr。单击显示/隐藏按钮效果很好，单击制作酷按钮效果很好，但是结合这两者的按钮会导致显示/隐藏动画中断。

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

提前致谢！

4

1 回答 1

13

问题是您正在尝试使用该类进行动画处理，而不是区分何时应该进行动画处理。也就是说，您的过渡效果通常适用于类，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声明。

于 2013-12-03T21:09:21.157 回答