ngAnimate of angularJS
A demo, reference https://docs.angularjs.org/api/ngAnimate
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular-animate.js"></script>
<style>
/*ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js*/
.summary{width:160px;height:160px;background:#f60;}
.fade{transition: 1s linear all;}
.fade.ng-enter{opacity:0;}
/*transition-delay:0.3s;transition-duration:0s;*/
.fade.ng-enter.ng-enter-active{opacity:1;}/* The finishing CSS styles for the enter animation */
.fade.ng-leave{opacity:1;}
.fade.ng-leave.ng-leave-active{opacity:0;}
</style>
</head>
<script>
(function(angular) {
// load the module in your application by adding it as a dependent module:
angular.module('test', ['ngAnimate']);
//angular.module("test").controller('TodoCtrl',['$scope', '$http', '$log', function ($scope, $http, $log){}]);
////.ng-hide-add and .ng-hide-remove need include {display:block;!important}
})(window.angular);
</script>
<body>
<div ng-app="test">
<input type="checkbox" ng-model="show"><div ng-if="show" class="fade summary"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular-animate.js"></script>
<style>
/*ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js*/
.summary{width:160px;height:160px;background:#f60;}
.fade{transition: 1s linear all;}
.fade.ng-enter{opacity:0;}
/*transition-delay:0.3s;transition-duration:0s;*/
.fade.ng-enter.ng-enter-active{opacity:1;}/* The finishing CSS styles for the enter animation */
.fade.ng-leave{opacity:1;}
.fade.ng-leave.ng-leave-active{opacity:0;}
</style>
</head>
<script>
(function(angular) {
// load the module in your application by adding it as a dependent module:
angular.module('test', ['ngAnimate']);
//angular.module("test").controller('TodoCtrl',['$scope', '$http', '$log', function ($scope, $http, $log){}]);
////.ng-hide-add and .ng-hide-remove need include {display:block;!important}
})(window.angular);
</script>
<body>
<div ng-app="test">
<input type="checkbox" ng-model="show"><div ng-if="show" class="fade summary"></div>
</div>
</body>
</html>
评论
发表评论