Javascript ngAnimate不再工作了吗？

我不能让一个简单的角度动画工作。我做了一个简单的撞击来展示：

HTML

JS

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

.fade-fx.ng-enter,
.fade-fx.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-fx.ng-leave,
.fade-fx.ng-enter.ng-enter-active {
  opacity: 1;
}

angular.module('myApp', ['ngAnimate']);
angular.module('myApp')
  .controller('myCtrl', function($scope) {
    $scope.texts = [
      {
        text: 'text1'
      },
      {
        text: 'text2'
      },
      {
        text: 'text3'
      }
    ];
  });

---

问题是我不确定我做错了什么。有什么想法吗？

尝试在初始数组初始化中添加一个

$timeout

。请看这里：

编辑：在不相关的注释上，切换会更干净

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

到

来自角度文档

动画

.enter-将新项目添加到列表或删除项目时 过滤后显示

.离开-从列表中删除项目或删除项目时 过滤掉

.移动-当相邻项目被过滤掉导致重新订购或 当项目内容被重新排序时

您需要添加一个搜索过滤器，使列表中的查询只在“index.html”中进行更改

{{text.text}

ngAnimate从未真正起作用。

angular.module('myApp')
  .controller('myCtrl', function($scope, $timeout) {
    $timeout(function() {
      $scope.texts = [{
        text: 'text1'
      }, {
        text: 'text2'
      }, {
        text: 'text3'
    }];
  });
});

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

.fade-fx {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

<div data-ng-controller="myCtrl">
  <input type="search" ng-model="q" placeholder="Search">
  <p class="fade-fx" data-ng-repeat="text in texts | filter:q as results">{{ text.text }}</p>
</div>