AngularJS 动画总结
一、如何使用在angular中我们使用 通过一个为 1)我们需要构建什么
2)如何让它工作ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如,当我们加载网站时,无论ng-view中填充了什么都会得到一个 我们所需要做的就是给 ngAnimate 可以应用于: ngRepeat,ngInclude,ngIf,ngSwitch,ngShow,ngHide,ngView 以及 ngClass ? 3)开始我们的程序(1) 文件结构,如下- index.html - style.css - app.js - page-home.html - page-about.html - page-contact.html (2) index.html :加载 AngularJS,ngRoute 以及 ngAnimate。用 bootstrap.css 来定义样式。 <!-- index.html --> <!DOCTYPE html> <html> <head> <!-- CSS --> <!-- load bootstrap (bootswatch version) --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- JS --> <!-- load angular,ngRoute,ngAnimate --> <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script> <script src="app.js"></script> </head> <!-- apply our angular app --> <body ng-app="animateApp"> <!-- inject our views using ng-view --> <!-- each angular controller applies a different class here --> <div class="page {{ pageClass }}" ng-view></div> </body> </html> (3) Angular 程序 app.js:创建程序、路由以及控制器。 // app.js // define our application and pull in ngRoute and ngAnimate var animateApp = angular.module('animateApp',['ngRoute','ngAnimate']); // ROUTING =============================================== // set our routing for this application // each route will pull in a different controller animateApp.config(function($routeProvider) { $routeProvider // home page .when('/',{ templateUrl: 'page-home.html',controller: 'mainController' }) // about page .when('/about',{ templateUrl: 'page-about.html',controller: 'aboutController' }) // contact page .when('/contact',{ templateUrl: 'page-contact.html',controller: 'contactController' }); }); // CONTROLLERS ============================================ // home page controller animateApp.controller('mainController',function($scope) { $scope.pageClass = 'page-home'; }); // about page controller animateApp.controller('aboutController',function($scope) { $scope.pageClass = 'page-about'; }); // contact page controller animateApp.controller('contactController',function($scope) { $scope.pageClass = 'page-contact'; }); (4) 视图 page-home.html,page-contact.html:为每个页面准备一些文字以及链到其他页面的链接地址。 <!-- page-home.html --> <h1>Angular Animations Shenanigans</h1> <h2>Home</h2> <a href="#about" class="btn btn-success btn-lg">About</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-about.html --> <h1>Animating Pages Is Fun</h1> <h2>About</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-contact.html --> <h1>Tons of Animations</h1> <h2>Contact</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#about" class="btn btn-success btn-lg">About</a> (5) 为App添加动画效果 style.css:ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave CSS动画/* ANIMATIONS ============================================================================= */ /* leaving animations ----------------------------------------- */ /* rotate and fall */ @keyframes rotateFall { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 40% { transform: rotateZ(17deg); } 60% { transform: rotateZ(16deg); } 100% { transform: translateY(100%) rotateZ(17deg); } } /* slide in from the bottom */ @keyframes slideOutLeft { to { transform: translateX(-100%); } } /* rotate out newspaper */ @keyframes rotateOutNewspaper { to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } } /* entering animations --------------------------------------- */ /* scale up */ @keyframes scaleUp { from { opacity: 0.3; -webkit-transform: scale(0.8); } } /* slide in from the right */ @keyframes slideInRight { from { transform:translateX(100%); } to { transform: translateX(0); } } /* slide in from the bottom */ @keyframes slideInUp { from { transform:translateY(100%); } to { transform: translateY(0); } } 进入和离开动画效果我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。 /* style.css */ ... .ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; } .ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; } ... 具体页面的动画效果... .ng-enter { z-index: 8888; } .ng-leave { z-index: 9999; } /* page specific animations ------------------------ */ /* home -------------------------- */ .page-home.ng-enter { animation: scaleUp 0.5s both ease-in; } .page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; } /* about ------------------------ */ .page-about.ng-enter { animation:slideInRight 0.5s both ease-in; } .page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; } /* contact ---------------------- */ .page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; } .page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; } ... (6)预览地址:http://plnkr.co/edit/uW4v9T?p=info 二、进阶1)其他类
|
- scala – 如何将Map [String,Seq [String]]转换为Map [Stri
- bash – 如何在cron中每个月的第一个工作日运行脚本?
- 运行shell脚本文件,启动java application
- 项目中集成 axis2 发布webservice
- 【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众巨幕式风
- 有没有人知道vim插件或脚本将特殊字符转换为相应的HTML实体
- scala – 为什么sbt在清洁后每次都执行依赖解析?
- angularjs – 在expect语句中一起添加变量
- 读取循环时只执行一次Shell脚本
- scala – VarArgs A * vs Seq [A]参数的功能