[AngularJS] ngAnimate using css. 1 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Egghead Videos</title>
    <link rel="stylesheet" href="./foundation.min.css">
    <link rel="stylesheet" href="./animate.css">
    <script type="text/javascript" src="./angular.min.js"></script>
    <script type="text/javascript" src="./angular-animate.min.js"></script>
    <script type="text/javascript" src="./app.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button class="button" ng-click="app.toggle=!app.toggle">Toggle Animation</button>
<div class="toggle" ng-if="app.toggle">Somecontenthere</div>
</body>
</html>

 

var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function() {
    this.toggle = true;
})

 

.toggle {
    -webkit-transition: linear 0.75s;
    -moz-transition: linear 0.75s;
    -ms-transition: linear 0.75s;
    -o-transition: linear 0.75s;
    transition: linear 0.75s;
}

.toggle.ng-enter {
    opacity: 0;
}

.toggle.ng-enter-active {
    opacity: 1;
}

.toggle.ng-leave {
    opacity: 1;
}

.toggle.ng-leave-active {
    opacity: 0;
}

 

posted @ 2014-08-27 03:29  Zhentiw  阅读(193)  评论(0)    收藏  举报