angularjs – 告诉ngAnimate只能动画ngShow / ngHide

发布时间：2020-12-17 07:36:50 所属栏目：安全来源：网络整理

导读：我有一个AngularJS 1.2.2 web应用程序,其 div我根据一些$scope属性显示/隐藏.使用ngAnimate模块,我可以动画显示和隐藏 div. div id="square" ng-show="showSquare" class="animate-shiny"/div 我也有一个我想要放在这个 div为此我使用ngClass. div id="squar

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

我该如何解决？我可以不手动解决$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声明.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!