Javascript 1.26之后不工作的角度ng动画
我使用的是Javascript 1.26之后不工作的角度ng动画,javascript,css,angularjs,Javascript,Css,Angularjs,我使用的是class=“animationName”而不是ng animate。然而,我似乎无法让下面的工作。我错过了什么 CSS: HTML: 添加 {{name} 控制器: angular.module('MyApp', []); function App($scope) { $scope.names = []; var data = []; for (var i = 0; i < 100; i++) { data.push('item
class=“animationName”
而不是ng animate。然而,我似乎无法让下面的工作。我错过了什么
CSS:
HTML:
添加
- {{name}
控制器:
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);
};
}
angular.module('MyApp',[]);
功能应用程序($scope){
$scope.names=[];
var数据=[];
对于(变量i=0;i<100;i++){
数据推送('item'+i)
}
$scope.add=函数(){
if(data.length)$scope.names.splice(0,0,data.pop());
};
$scope.remove=函数(索引){
$scope.names.splice(索引,1);
};
}
这是1.26版的:
这是同样的老小提琴,1.1。它在工作:工作小提琴,1.4.2
JS:
<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);
};
}
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());
};
}]);
<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>
.fadeLine.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fadeLine.ng-enter-active {
opacity:1;
}