不能运行 ngAnimate动画

Question

更新： 差不多解决了，问题是因为我在 div 中添加了第二个 'class' 属性。现在它可以工作了，但我仍然看不到 ng-repeat 的动画，现在我有 question N2 ： 如何使崩溃和扩展时间不同？ 我希望我的 div 崩溃比扩展时快三倍。 Current Plank.

Here is my example

And here is working example from the other SO question (I'm using absolutly the same method!)

我不知道为什么在 ng-repeat 和 ng-show 上都没有显示动画。 Html:

  <body ng-controller="mainCtrl as vm" class="container">
    <div ng-repeat="user in vm.users" class="repeat-item">
        <my-user-info user="user"></my-user-info>
    </div>
  </body>

指令代码：

angular.module('main').directive('myUserInfo', function(){
    var directive = {
        templateUrl: 'userInfoCard.directive.html',
        restrict: 'AE',
        scope: {
            user: '='
        },
        controller: ctrl
    }
    return directive;

    function ctrl($scope){
        console.log($scope)
        $scope.knightMe = function(user){
            //debugger;
            user.rank = 'knight';
        }
        $scope.collapse = function(){
            $scope.collapsed = !$scope.collapsed;
        }        
    }

指令模板：

<div class="panel panel-primary">
    <div class="panel-heading" ng-click="collapse()">
        <h4 class="no-margin"><b>Name:&nbsp;</b>{{user.name}}, <b>Age:&nbsp;</b>{{user.age}}</h4>
    </div>
    <div class="panel-body" ng-show="!collapsed" class="fadein fadeout">
        <div ng-show="!!user.address">
            <h4>Address:</h4> {{user.address.street}}
            <br /> {{user.address.city}}
            <br /> {{user.address.country}}
            <br />
        </div>
        <div ng-show="!!user.friends && (user.friends.length > 0)">
            <h4>Friends:</h4>
            <ul class="friends">
                <li ng-repeat="friend in user.friends">{{friend}}</li>
            </ul>
        </div>
        <div ng-show="!!user.rank"><h4>Rank: {{user.rank}}</h4></div>
        <div ng-show="!user.rank">
            <button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
        </div>
    </div>
</div>

和css：

/* ====================== */

.fadein,
.fadeout {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  display: block !important;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  display: block !important;
}

/* ====================== */

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1;
}

.ng-enter 和 .ng-enter-active CSS 类由 AngularJS 生成并附加到元素，当 ngIf 告诉它它正在添加一个新的项目进入重复列表。根据动画的不同，添加其他 CSS 类。

Answer 1

Change

<div class="panel-body" ng-show="!collapsed" class="fadein fadeout">

到

<div class="panel-body fadein fadeout" ng-show="!collapsed">

您在 div 上有两个 class 声明。可能你想做 ng-class={'fadein fadeout' : !collapsed}.

Working plunkr: https://plnkr.co/edit/MsgJxp?p=preview

Check this SO post for Adding multiple class using ng-class

不能运行 ngAnimate动画

Can't run ngAnimate animation

angularjs

ng-animate