Question

这基本上是我的问题： http://jsfiddle.net/mhff6u7y/3/

我有重复和过滤的项目数组，有时我会为其中一个项目制作动画。问题是当过滤器更改，并且动画项目不再显示时，该项目将保持不变，直到完成动画。所以，是的，为什么动画元素保持不变，而不是在我更换过滤器时消失？

代码（与jsfiddle相同）：

HTML（需要导入：angular.js，angular-animate.js，animate.min.css）：

<div ng-controller="MyCtrl">
    <label>
      <input type="number" min="1" max="3" ng-model="choice.number" />
   </label>
  <br>
    selected number: {{ choice.number }}
    <div class="loader">
      <div class="item" 
           ng-repeat="item in list | filter: { number:choice.number}" 
           ng-class="{'animated':item == animatedItem}"
           ng-click="animatedItem = item;">
        {{item.text}}
      </div>
  </div>
</div>

的CSS：

@-webkit-keyframes myanimation{
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}
.loader {
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 5px;
    border-radius: 2px;
    background: #eee;
}
.item {
    margin: 5px;
    border-radius: 2px;
    background-color: #808080;
}
.animated {
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 50;

    -webkit-animation-name:myanimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 50;
}

JavaScript的：

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', function($scope) {
    $scope.isThinking = true;
    $scope.animatedItem = {};
    $scope.list = [{'number': 1, 'text': 'item1'},
                  {'number': 1, 'text': 'item11'},
                  {'number': 1, 'text': 'item111'},
                  {'number': 2, 'text': 'item2'},
                  {'number': 2, 'text': 'item22'},
                  {'number': 2, 'text': 'item222'},
                  {'number': 3, 'text': 'item3'},
                  {'number': 3, 'text': 'item33'},
                  {'number': 3, 'text': 'item333'}];
});

提前致谢

Answer 1

我在这里得到答案： https://github.com/angular/angular.js/issues/13436

答案：

＆＃39;这不是一个错误，它是ngAnimate的工作方式。 .animated上的动画由ngRepeat拾取，并被解释为离开动画，这就是元素保留到动画结束的原因。这是因为ngAnimate允许同时拥有多个动画。所以为了不混淆动画引擎，你应该排除特定的＆＃34;结构＆＃34;您的样式中的动画，请参见此处：http://plnkr.co/edit/onBcM37KxV2X3S5SgtuX?p=preview＆＃39;

所以基本上添加＆＃39;：not（.ng-leave）＆＃39;到css：

.animated:not(.ng-leave) {
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 50;

    -webkit-animation-name:myanimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 50;
}

动画元素角度不会消失

1 个答案: