Angular ng-hide'ing 对于动画来说太快了答案

【问题标题】：Angular ng-hide'ing is too fast for animationAngular ng-hide'ing 对于动画来说太快了
【发布时间】：2014-07-28 19:56:47
【问题描述】：

Angular 1.2 和来自 http://daneden.github.io/animate.css/ 的 animate.css

我的动画是简单的ng-show="somevalue"。我有用于 ng-show 的动画，它很好地淡入。但是当元素被隐藏时，它会在在淡出动画可以显示之前消失。

我试过了，.fader.ng-hide-add-active、.fader.ng-hide-add 等。但动画就是不显示。该元素立即消失。

.fader.ng-hide-remove {
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.fader.ng-hide-add-active {
    -webkit-animation: fadeOut 1s;
    -moz-animation: fadeOut 1s;
    -o-animation: fadeOut 1s;
    animation: fadeOut 1s;
}

【问题讨论】：

标签： jquery css asp.net-mvc angularjs animation

【解决方案1】：

将其重命名为.fader.ng-hide-add并添加display: block !important;：

.fader.ng-hide-add {
  -webkit-animation: fadeOut 1s;
  -moz-animation: fadeOut 1s;
  -o-animation: fadeOut 1s;
  animation: fadeOut 1s;
  display: block !important;
}

这是覆盖 display: none 的默认 ng-hide 样式所必需的。

演示： http://plnkr.co/edit/oUVa7OFddIKIayx6c4aU?p=preview

【讨论】：