我无法使用简单的角度动画。我制作了一个简单的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'
}
];
});
问题是我不确定我做错了什么。有什么想法吗?
答案 0 :(得分:1)
尝试在初始阵列初始化中添加$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;
}
答案 1 :(得分:0)
来自Angular Doc
动画
.enter - 将新项目添加到列表或项目时 在过滤器后显示
.leave - 从列表中删除项目或项目时 过滤掉了
.move - 过滤掉相邻的项目导致重新排序或 当项目内容重新排序时
您需要添加搜索过滤器才能在列表中进行查询,只需在&#34; index.html&#34;中进行更改如
<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>