告诉ngAnimate仅动画ngShow/ngHide

Question

我有一个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.单击显示/隐藏按钮效果很好,单击make cool按钮效果很好,但组合这两个按钮会导致显示/隐藏动画中断.

我该如何解决？我可以在没有手动寻址的情况下完成$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声明.