Question

UPD：它几乎已经解决，问题是beacouse我在我的div中添加了第二个“class”属性。现在它是有效的，但我仍然无法看到ng-repeat的动画，现在我有 问题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;
}

当ngIf告诉它正在向重复列表中添加新项时，AngularJS会生成.ng-enter和.ng-enter-active CSS类并将其附加到元素。根据动画，添加其他CSS类。

Answer 1

更改

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

到

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

你在div上有两个类声明。也许你想做ng-class = {＆＃39; fadein fadeout＆＃39; ：！折叠}。

工作plunkr：https://plnkr.co/edit/MsgJxp?p=preview

检查this SO post Adding multiple class using ng-class

无法运行ngAnimate动画

1 个答案: