我有一个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的动画.
Here’s a Plnkr that demonstrates the behavior.点击显示/隐藏按钮效果很好,点击make cool按钮效果很好,但组合这两个按钮的按钮会导致显示/隐藏动画中断.
提前致谢！
问题在于,您正在尝试使用该类进行动画处理,而不应在动画时间之间进行区分.也就是说,您的过渡效应一般适用于该类,即在该类引用时,该动画会被视为必须进行工作.我修改了你的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声明.
