我使用的class="animationName"
不是ng-animate,因为它已被1.2更改。但是我似乎无法使以下内容正常工作。我想念什么?
CSS:
.move-animation.ng-move {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
max-height: 0;
opacity:0;
}
.move-animation.ng-move.ng-move-active {
max-height: 250px;
opacity:1;
}
HTML:
<div ngApp="MyApp">
<div ng-controller="App">
<button ng-click="add()">Add</button>
<ul>
<li class="move-animation" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
</ul>
</div>
</div>
控制器:
angular.module('MyApp', []);
function App($scope) {
$scope.names = [];
var data = [];
for (var i = 0; i < 100; i++) {
data.push('item' + i)
}
$scope.add = function () {
if (data.length) $scope.names.splice(0, 0, data.pop());
};
$scope.remove = function (index) {
$scope.names.splice(index, 1);
};
}
这是1.26版:http : //jsfiddle.net/6t42M/178/这是旧的小提琴,版本为1.1。工作正常:http://jsfiddle.net/6t42M/100/
工作提琴,1.4.2。
JS:
angular.module('MyApp', ['ngAnimate'])
.controller('AppController', ['$scope', function ($scope) {
$scope.names = [];
var data = [];
for (var i = 0; i < 100; i++) {
data.push('item' + i)
}
$scope.add = function () {
if (data.length) $scope.names.splice(0, 0, data.pop());
};
}]);
HTML:
<div ngApp="MyApp">
<div ng-controller="AppController">
<button ng-click="add()">Add</button>
<ul>
<li class="fadeLine" ng-repeat="name in names">{{name}}</li>
</ul>
</div>
</div>
CSS:
.fadeLine.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fadeLine.ng-enter-active {
opacity:1;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句