Angular bootstrap animate.css 删除动画答案

【问题标题】：Angular bootstrap animate.css remove animationAngular bootstrap animate.css 删除动画
【发布时间】：2014-10-21 14:37:51
【问题描述】：

在我的项目中，感谢 animate.css，我可以有这样的入口动画：

<div class="row animated fadeInDown" ng-show="someCondition">

这很棒。当someCondition 为真时，div 会出现动画。我不明白如何导致相反的情况发生。比如说，在我的控制器中我设置了someCondition = false;。我应该在标记中做什么以使 div 执行fadeOutUp？

我尝试将淡出放在 class="" 属性中，但这与淡入冲突。我也尝试了 ng-class={} 但我不知道删除某些内容时的条件是什么.

【问题讨论】：

标签： angularjs twitter-bootstrap animate.css

【解决方案1】：

试试条件ng-class:

<div ng-class="someCondition && 'fadeInDown' || 'fadeOutUp'">

更新：

在标记中使用变量类名：

<div ng-class="someClass">

并向控制器添加一个监视以应用正确的类名：

$scope.$watch('someCondition', function(newval, oldval){
    if($scope.someCondition){
        $scope.someClass = 'fadeInDown';
    } else {
        $scope.someClass = 'fadeOutUp';
    }
});

在下面的小提琴中，我添加了一个 setInterval 来模拟条件变化： http://jsfiddle.net/F52y5/59/

【讨论】：

只是眨眼 - 没有动画。我一定是做错了。
当我删除 ng-show 时，div 无条件出现。
我不是 jsfiddle 的高手。到目前为止，这个有我的代码，但即使是淡入淡出（现在对我有用）在这个小提琴中也不起作用。不知道为什么。 jsfiddle.net/F52y5/3
我更新了答案，试试看是否符合你的需求