我有一个我想要的按钮
<!DOCTYPE html>
<html>
<head>
<style>.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
line-height:0;
opacity:0;
padding:0 10px;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.check-element {
padding:10px;
border:1px solid black;
background:white;
}
</style>
</head>
<body>
<div ng-app=App>
<button ng-click="showme=true">Submit</button>
<div class="check-element animate-show" ng-show="showme">
I show up when the Submit button is clicked.
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script>
<script type="text/javascript">
angular.module('App', ['ngAnimate']);
</script>
</body>
</html>
它运作良好:
但我如何才能让它在片刻后以与淡入相同的方式淡出？
最佳答案
我已经设置了一个 plunker link单击提交按钮后 5 秒淡出 DIV。下面是它的样子:
var myApp = angular.module('App', ['ngAnimate']);
myApp.controller('MyController', ['$scope', '$timeout',
function($scope, $timeout) {
$scope.showme = false;
$scope.callAtTimeOut = function() {
$scope.showme = false;
}
$scope.animateDiv = function() {
$scope.showme = true;
$timeout(function() {
$scope.callAtTimeOut();
}, 5000);
}
}
]);
关于html - 动画打开后获取消息到 fate away，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28593299/