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更有趣于动画。

Here's a Plnkr that demonstrates the behavior。单击显示/隐藏按钮效果很好，单击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声明。

告诉ngAnimate仅动画ngShow / ngHide

1 个答案: