我无法使用简单的 Angular 动画。我做了一个简单的 Plunkr 来展示它:https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ
HTML
<head>
<link rel="stylesheet" href="style.css">
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<div data-ng-controller="myCtrl">
<p class="fade-fx" data-ng-repeat="text in texts">{{ text.text }}</p>
</div>
</body>
CSS
.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;
}
JS
angular.module('myApp', ['ngAnimate']);
angular.module('myApp')
.controller('myCtrl', function($scope) {
$scope.texts = [
{
text: 'text1'
},
{
text: 'text2'
},
{
text: 'text3'
}
];
});
问题是我不确定自己做错了什么。有什么想法吗？
最佳答案
尝试将 $timeout 添加到初始数组初始化中。看这里:
https://plnkr.co/edit/ZB312BKV8vAD3hYttaXZ?p=preview
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;
}
关于javascript - ngAnimate 不再工作了吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35136713/