如何在指令中使用 ng-enter & leave css 动画
How to use ng-enter & leave css animations inside of directive
我在 angular 指令中有一个 ng-repeat
元素,我想对其进行动画处理。
现在,我已经将 angular-animate 文件添加到文档中,并将 ngAnimate
依赖项添加到我的应用程序中……但是,该元素似乎没有得到 ng-*
动画 类 应用于它。我以为 ng-repeat
指令会自动识别 ngAnimate?我错过了什么?将它放在指令中会以某种方式强制我直接使用 $animate 吗?
http://plnkr.co/edit/VOVUtq1BZjop2LBWDk8a?p=preview
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body>
<alerts></alerts>
</body>
</html>
script.js
'use strict';
var app = angular.module('app', ['ngAnimate']);
app.run(function(alert) {
alert.success('Hello World!');
});
app.factory('alert', function($timeout) {
var options = {
duration: 3000
};
var counter = 0;
var alerts = [];
function createAlert(type, message) {
var alert = {
type: type, message: message, id: counter++
};
alert.promise = $timeout(function() {
removeAlert(alert.id);
}, options.duration);
alerts.push(alert);
}
function removeAlert(id) {
var alert = find(id);
if (alert && !alert.deleting) {
alert.deleting = true;
var index = alerts.indexOf(alert);
// Cancel the automatic timeout
$timeout.cancel(alerts[index].promise);
// Remove from the alerts array
alerts.splice(index, 1);
}
}
function clear(alert) {
if (alert) {
removeAlert(alert.id);
} else {
for (var i = 0; i < alerts.length; i++) {
removeAlert(alerts[i].id);
}
}
}
function find(id) {
for (var i = 0; i < alerts.length; i++) {
if (alerts[i].id === id) {
return alerts[i];
}
}
}
function success(message) {
createAlert('success', message);
}
return {
alerts: alerts,
success: success,
clear: clear
}
});
app.directive('alerts', function(alert) {
return {
restrict: 'AE',
templateUrl: 'alerts.html',
scope: true,
controller: function($scope) {
$scope.close = function(a) {
alert.clear(a);
};
},
link: function(scope) {
scope.alerts = alert.alerts;
}
}
});
alerts.html
<div ng-repeat="alert in alerts" class="alert alert-{{alert.type}}">
<button type="button" class="close" ng-click="close(alert)">×</button>
{{alert.message}}
</div>
style.css
.ng-leave {
transition: all 1s linear;
}
.ng-leave {
opacity: 1;
}
.ng-leave-active {
opacity: 0;
}
哦。您没有导入 style.css!
我在 angular 指令中有一个 ng-repeat
元素,我想对其进行动画处理。
现在,我已经将 angular-animate 文件添加到文档中,并将 ngAnimate
依赖项添加到我的应用程序中……但是,该元素似乎没有得到 ng-*
动画 类 应用于它。我以为 ng-repeat
指令会自动识别 ngAnimate?我错过了什么?将它放在指令中会以某种方式强制我直接使用 $animate 吗?
http://plnkr.co/edit/VOVUtq1BZjop2LBWDk8a?p=preview
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body>
<alerts></alerts>
</body>
</html>
script.js
'use strict';
var app = angular.module('app', ['ngAnimate']);
app.run(function(alert) {
alert.success('Hello World!');
});
app.factory('alert', function($timeout) {
var options = {
duration: 3000
};
var counter = 0;
var alerts = [];
function createAlert(type, message) {
var alert = {
type: type, message: message, id: counter++
};
alert.promise = $timeout(function() {
removeAlert(alert.id);
}, options.duration);
alerts.push(alert);
}
function removeAlert(id) {
var alert = find(id);
if (alert && !alert.deleting) {
alert.deleting = true;
var index = alerts.indexOf(alert);
// Cancel the automatic timeout
$timeout.cancel(alerts[index].promise);
// Remove from the alerts array
alerts.splice(index, 1);
}
}
function clear(alert) {
if (alert) {
removeAlert(alert.id);
} else {
for (var i = 0; i < alerts.length; i++) {
removeAlert(alerts[i].id);
}
}
}
function find(id) {
for (var i = 0; i < alerts.length; i++) {
if (alerts[i].id === id) {
return alerts[i];
}
}
}
function success(message) {
createAlert('success', message);
}
return {
alerts: alerts,
success: success,
clear: clear
}
});
app.directive('alerts', function(alert) {
return {
restrict: 'AE',
templateUrl: 'alerts.html',
scope: true,
controller: function($scope) {
$scope.close = function(a) {
alert.clear(a);
};
},
link: function(scope) {
scope.alerts = alert.alerts;
}
}
});
alerts.html
<div ng-repeat="alert in alerts" class="alert alert-{{alert.type}}">
<button type="button" class="close" ng-click="close(alert)">×</button>
{{alert.message}}
</div>
style.css
.ng-leave {
transition: all 1s linear;
}
.ng-leave {
opacity: 1;
}
.ng-leave-active {
opacity: 0;
}
哦。您没有导入 style.css!