0
в примере ниже вы можете видеть, что когда элемент добавлен в список, он делает анимацию затухания и затем исчезает, я хочу, чтобы у него был стиль начальной загрузки после анимации. Вероятно, это противоречит загрузке css, но Я не могу понять, какой именно код CSS это делает.Элемент анимации AngularJS исчезает
код
HTML
<head>
<link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
<link rel="stylesheet" href="style.css"/>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://raw.githubusercontent.com/angular/bower-angular-animate/master/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Controller">
<input type="button" value='click' ng-click="addItem()"/>
<input type="button" value="delete" ng-click="deleteItem()"/>
<input type="text" ng-model="filterText"/>
<table class="table table-striped table-hover center-table">
<tr class="fade" ng-repeat="item in (filtered=(items | filter:filterText))">
<td>{{item.name}}</td>
</tr>
</table>
</div>
</body>
</html>
JS
var app=angular.module('App',['ngAnimate']);
app.controller('Controller',function($scope){
$scope.items=[];
$scope.addItem=function(){
$scope.items.push({'name':'cgagaga'})
};
$scope.deleteItem=function(){
$scope.items.splice(0,1);
}
});
CSS
.fade.ng-enter {
transition: 2s linear all;
background-color: lightgreen;
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
background-color: #f3f3f3;
opacity: 1;
}
.fade.ng-leave {
transition: 1s linear all;
background-color: #FF6F79;
opacity: 1;
}
.fade.ng-leave.ng-leave-active {
opacity: 0;
.fade.ng-leave.ng-несмываемые активный { непрозрачности: 0; –