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; 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; 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>