这篇文章主要介绍了如何利用 CSS3 在 Angular 中实现动画效果,对 angular 动画相关知识感兴趣的朋友一起学习吧
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
废话不多说了,直接给大家贴实例代码。
直接看例子:
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件1
- </title>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{width:200px;height:200px;background-color:red;transition:1s all;}
- /*显示操作*/ .box.ng-enter{opacity:0;} .box.ng-enter-active{opacity:1;} /*隐藏操作*/
- .box.ng-leave{opacity:1;} .box.ng-leave-active{opacity:0;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <input type="checkbox" ng-model="bBtn">
- <div class="box" ng-if="bBtn">
- </div>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngAnimate']);
- m1.controller('Aaa', ['$scope',
- function($scope) {
- $scope.bBtn = true;
- }]);
- </script>
- </body>
- </html>
引入 angular-animate 插件,我们绑定了 ng-if 指令,在删除和添加 DOM 节点的时候,angular 会添加指定的 class,方便我们完成动画。
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
现在再看看显示和隐藏。
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件4
- </title>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{width:200px;height:200px;background-color:red;transition:1s all;}
- /*显示操作*/ .box.ng-hide-remove{opacity:0;} .box.ng-hide-remove-active{opacity:1;}
- /*隐藏操作*/ .box.ng-hide-add{opacity:1;} .box.ng-hide-add-active{opacity:0;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <input type="checkbox" ng-model="bBtn">
- <div class="box" ng-show="bBtn">
- </div>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngAnimate']);
- m1.controller('Aaa', ['$scope',
- function($scope) {
- $scope.bBtn = true;
- }]);
- </script>
- </body>
- </html>
.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active
这个例子我们使用的是 ng-show,属于显示和隐藏。上一个例子是 ng-if,属于添加和删除。
回顾上一节我们提到的路由,我们可以结合起来操作。
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件2
- </title>
- <script type="text/javascript" src="js/angular.min.js">
- </script>
- <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js">
- </script>
- <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{transition:1s all;position:absolute;} /*显示操作*/ .box.ng-enter{opacity:0;}
- .box.ng-enter-active{opacity:1;} /*隐藏操作*/ .box.ng-leave{opacity:1;} .box.ng-leave-active{opacity:0;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <a href="javascript:void(0);" ng-click="$location.path('aaa')">
- 首页
- </a>
- <a href="javascript:void(0);" ng-click="$location.path('bbb')">
- 内容
- </a>
- <a href="javascript:void(0);" ng-click="$location.path('ccc')">
- 标题
- </a>
- <div class="box" ng-view>
- </div>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngRoute', 'ngAnimate']);
- m1.config(['$routeProvider',
- function($routeProvider) {
- $routeProvider.when('/aaa', {
- template: '<h1>AAA</h1>{{name}}',
- controller: 'Aaa'
- }).when('/bbb', {
- template: '<h1>BBB</h1>{{name}}',
- controller: 'Bbb'
- }).when('/ccc', {
- template: '<h1>CCC</h1>{{name}}',
- controller: 'Ccc'
- }).otherwise({
- redirectTo: '/aaa'
- });
- }]);
- m1.controller('Aaa', ['$scope', '$location', '$routeParams',
- function($scope, $location, $routeParams) {
- $scope.name = 'xiecg-Aaa';
- $scope.$location = $location;
- }]);
- m1.controller('Bbb', ['$scope',
- function($scope) {
- $scope.name = 'xiecg-Bbb';
- }]);
- m1.controller('Ccc', ['$scope',
- function($scope) {
- $scope.name = 'xiecg-Ccc';
- }]);
- </script>
- </body>
- </html>
这样在切换页面的时候就有淡入淡出的效果。
再回顾前面的几章讲的百度搜索:
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件3
- </title>
- <script type="text/javascript" src="js/jquery-1.11.1.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{transition:1s all;} /*显示操作*/ .box.ng-enter{opacity:0;} .box.ng-enter-active{opacity:1;}
- /*隐藏操作*/ .box.ng-leave{display:none;} .box.ng-enter-stagger{animation-delay:0.1s;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <input type="text" ng-model="name" ng-keyup="change(name)">
- <input type="button" ng-click="change(name)" value="搜索">
- <ul>
- <li class="box" ng-repeat="d in data">
- {{d}}
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngAnimate']);
- m1.controller('Aaa', ['$scope', '$http', '$timeout',
- function($scope, $http, $timeout) {
- var timer = null;
- $scope.data = [];
- $scope.change = function(name) {
- $timeout.cancel(timer);
- timer = $timeout(function() {
- $http({
- method: 'JSONP',
- url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + name + '&cb=JSON_CALLBACK',
- }).success(function(data, state, headers, config) {
- console.log(data);
- $scope.data = data.s;
- }).error(function(data) {
- console.log(data);
- });
- },
- 500);
- };
- }]);
- </script>
- </body>
- </html>
通过跨域我们得到百度返回过来的数据,依次过渡显示到页面上。
下面来看 JS 动画的例子:
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件5
- </title>
- <script type="text/javascript" src="js/jquery-1.11.1.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{width:200px;height:200px;background-color:red;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <input type="checkbox" ng-model="bBtn">
- <div class="box" ng-if="bBtn">
- </div>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngAnimate']);
- //ng-if
- m1.animation('.box',
- function() {
- return {
- //hide(删除)
- leave: function(element, done) {
- //console.log(element,done); //元素节点&删除节点的回调函数
- $(element).animate({
- width: 0,
- height: 0
- },
- 1000, done);
- },
- //show(填充)
- enter: function(element, done) {
- //ng-if会动态创建元素,元素默认就有200的高宽。。。
- $(element).css({
- width: 0,
- height: 0
- }).animate({
- width: 200,
- height: 200
- },
- 1000, done);
- }
- };
- });
- m1.controller('Aaa', ['$scope',
- function($scope) {
- $scope.bBtn = true;
- }]);
- </script>
- </body>
- </html>
JS 动画我们使用 JQ 的动画库来完成,注意我们在视图上使用的是 ng-if,表示添加和删除 DOM 节点,所以我们在控制器 return leave&enter。
JS 动画有了 ng-if,自然就是 ng-show。
- <!DOCTYPE HTML>
- <html ng-app="myApp">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- ngAnimate插件5
- </title>
- <script type="text/javascript" src="js/jquery-1.11.1.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js">
- </script>
- <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js">
- </script>
- <style type="text/css">
- .box{width:200px;height:200px;background-color:red;}
- </style>
- </head>
- <body>
- <div ng-controller="Aaa">
- <input type="checkbox" ng-model="bBtn">
- <div class="box" ng-show="bBtn">
- </div>
- </div>
- <script type="text/javascript">
- var m1 = angular.module('myApp', ['ngAnimate']);
- //ng-show
- m1.animation('.box',
- function() {
- return {
- //hide(隐藏)
- addClass: function(element, sClass, done) {
- //console.log(element,sClass,done); //元素节点&样式名&删除节点的回调函数
- $(element).animate({
- width: 0,
- height: 0
- },
- 1000, done);
- },
- //show(显示)
- removeClass: function(element, sClass, done) {
- $(element).animate({
- width: 200,
- height: 200
- },
- 1000, done);
- }
- };
- });
- m1.controller('Aaa', ['$scope',
- function($scope) {
- $scope.bBtn = true;
- }]);
- </script>
- </body>
- </html>
在控制器 return addClass&removeClass,表示隐藏和显示。
来源: