AngularJS(14)-动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        div {
            transition: all linear 0.5s;
            background-color: lightblue;
            height: 100px;
            width: 100%;
            position: relative;
            top: 0;
            left: 0;
        }
        .ng-hide {
            height: 0;
            width: 0;
            background-color: transparent;
            top: -200px;
            left: 200px;
        }
    </style>
    <script src="angular-1.4.1/angular.min.js"></script>
    <script src="angular-1.4.1/angular-animate.min.js"></script><!--动画库-->
</head>
<body ng-app="ngAnimate">
  <h1>隐藏DIV:<input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
  <script>
      var app = angular.module('myApp',['ngAnimate']);
  </script>
</body>
</html>

　　







            

            
posted @ 
2016-09-28 16:42 
My Way! 
阅读(130) 
评论(0) 
编辑 
收藏 
举报