获取消息命以外动画后开放 [英] Getting message to fate away after animating open
本文介绍了获取消息命以外动画后开放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个按钮,我想
<!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>
这是正常工作:
但我怎么让它消失片刻之后,它消失的方式一样吗?
But how do I get it to fade away after a few moments the same way it faded in?
推荐答案
我已经建立了的淡出的DIV 5秒提交按钮后plunker链接被点击。下面是它的外观:
I have setup a plunker link that fades out the DIV 5 secs after submit button is clicked. Below is how it looks:
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);
}
}
]);
这篇关于获取消息命以外动画后开放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文