如何向 angularjs uib-alert 指令添加动画
How to add animation to angularjs uib-alert directive
我想为推入数组的新警报添加淡入动画，为已关闭的警报添加淡出动画。
警报将在 5 秒后自动解除。
我已经包含 angular-animate ui-bootstrap 和 ui-bootstrap-tpls 库。
如何让这些动画正常工作？
查看演示：http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview
HTML
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Alert With Animation</h1>
<uib-alert
ng-repeat="alert in alerts"
type="{{alert.type}}"
dismiss-on-timeout="5000"
close="alerts.splice($index, 1);">{{alert.msg}}
</uib-alert>
<input type='text' ng-model='msg' />
<button ng-click="addAlert(msg,'danger')">Add Alert</button>
</body>
</html>
脚本
(function() {
var app = angular.module("myApp", ['ui.bootstrap', 'ngAnimate']);
app.controller("MainController", function($scope) {
$scope.alerts = [];
$scope.msg = "No Animation!";
$scope.addAlert = function(msg, type) {
$scope.alerts.push({
msg: msg,
type: type
});
};
});
}());
答案基于 Pankaj 的评论。
这让我看到了这篇文章：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
- 将
class='repeat-item' 添加到 <uib-alert>..</uib-alert> 元素。
为动画效果添加了适当的样式。
<style type="text/css">
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity: 1;
}
</style>
查看工作演示：https://plnkr.co/edit/CK2lV4mBVGs8q5gyYklE?p=preview
一个小故障
第一次点击添加提醒时，没有淡入动画。在那之后，一切似乎都正常了。
我想为推入数组的新警报添加淡入动画，为已关闭的警报添加淡出动画。
警报将在 5 秒后自动解除。
我已经包含 angular-animate ui-bootstrap 和 ui-bootstrap-tpls 库。
如何让这些动画正常工作？
查看演示：http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview
HTML
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Alert With Animation</h1>
<uib-alert
ng-repeat="alert in alerts"
type="{{alert.type}}"
dismiss-on-timeout="5000"
close="alerts.splice($index, 1);">{{alert.msg}}
</uib-alert>
<input type='text' ng-model='msg' />
<button ng-click="addAlert(msg,'danger')">Add Alert</button>
</body>
</html>
脚本
(function() {
var app = angular.module("myApp", ['ui.bootstrap', 'ngAnimate']);
app.controller("MainController", function($scope) {
$scope.alerts = [];
$scope.msg = "No Animation!";
$scope.addAlert = function(msg, type) {
$scope.alerts.push({
msg: msg,
type: type
});
};
});
}());
答案基于 Pankaj 的评论。
这让我看到了这篇文章：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
- 将
class='repeat-item'添加到<uib-alert>..</uib-alert>元素。 为动画效果添加了适当的样式。
<style type="text/css"> .repeat-item.ng-enter, .repeat-item.ng-leave { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; } .repeat-item.ng-enter, .repeat-item.ng-leave.ng-leave-active { opacity: 0; } .repeat-item.ng-leave, .repeat-item.ng-enter.ng-enter-active { opacity: 1; } </style>
查看工作演示：https://plnkr.co/edit/CK2lV4mBVGs8q5gyYklE?p=preview
一个小故障
第一次点击添加提醒时，没有淡入动画。在那之后，一切似乎都正常了。