使用ngAnimate动画化AngularJS应用
时间：2020-02-23 14:29:37 来源:igfitidea点击:
AngularJS是一个超级英雄JavaScript框架，它使创建单页应用程序(SPA)非常容易。
最重要的是，AngularJS附带了一些可用的Angular模块，这些模块可用于创建令人敬畏的用户体验。
在这篇文章中，我们将看到如何使用流行的ngAnimate将页面过渡/动画添加到Angular视图。
ngAnimate可与ngRepeat，ngView，ngInclude，ngIf，ngMessage等各种指令一起使用。
在这篇文章中，我们将使用带有ngView的动画
其中我们使用的是Adobe的Brackets IDE，但是我们可以自由使用其他工具，例如Sublime Text，JetBrains的WebStorm等。
注意：我们还将使用Bootswatch Bootstrap API为HTML页面提供漂亮的外观
项目结构：
以下是Brackets IDE中的项目结构
这是项目中使用的每个文件的简短描述
animation.css –主CSS文件，我们其中定义页面动画
bootstrap.min.css –引导给我们的<a>标签漂亮外观的引导程序引导程序
config.js –主JavaScript文件，我们其中定义Angular模块以及路线和控制器
shellPage.html –这是将动态加载其他视图的shell页面
view1.html，view2.html，view3.html –这些是部分视图，将加载到shellPage中
如何应用动画：
ngAnimate将CSS类应用于不同的Angular指令，具体取决于它们是进入还是离开视图
.ng-enter –只要将CSS类加载到页面中，此CSS类就会将其应用于指令
.ng-leave –每当离开页面时，此CSS类都会在指令上应用
让我们逐个浏览每个文件
shellPage.html
shellPage加载所需的资源，将ng-app应用于主体，并添加ng-view以动态注入视图。
< html>
< head>
< !-- Main CSS style where we define our animations -->
< link rel="stylesheet" href="css/animation.css">
< !-- Bootswatch Bootstrap to give our pages (buttons) beautiful look -->
< link rel="stylesheet" href="css/bootstrap.min.css">
< !-- JS for angular, ngRoute and ngAnimate -->
< script src="https://code.angularjs.org/1.3.0/angular.js">< /script>
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.js">< /script>
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js">< /script>
< !-- Main JS where we define our Angular Module along with routes and controllers -->
< script src="js/config.js">< /script>
< /head>
< body ng-app="transitionApp">
< div class="view {{ cssClass }}" ng-view>< /div>
< div id="heading">
< h1>Animating with ngAnimate< /h1>
< /div>
< /body>
< /html>
config.js
在配置文件中，我们定义了Angular模块以及路由和控制器。
模块transitionApp具有两个依赖项：ngAnimate和ngRoute
var transitionApp = angular.module('transitionApp', ['ngAnimate', 'ngRoute']);
transitionApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/view1.html',
controller: 'view1Controller'
})
.when('/view2', {
templateUrl: 'partials/view2.html',
controller: 'view2Controller'
})
.when('/view3', {
templateUrl: 'partials/view3.html',
controller: 'view3Controller'
});
});
transitionApp.controller('view1Controller', function($scope) {
$scope.cssClass = 'view1';
});
transitionApp.controller('view2Controller', function($scope) {
$scope.cssClass = 'view2';
});
transitionApp.controller('view3Controller', function($scope) {
$scope.cssClass = 'view3';
});
我们定义了三个局部视图(view1，view2，view3)，这些视图将根据URL注入到Shellpage中。
各自的控制器设置一个cssClass属性，该属性是CSS类的名称，该属性将应用于ng-view。
我们将在这些CSS类中定义动画，这些动画类将为每个页面加载不同的动画。
部分页面view1.html，view2.html，view3.html
部分页面没有太多内容，只有一些文本和指向其他视图的链接
view1.html
< h3>This is View 1< /h3> < a href="#view2" class="btn btn-success btn-lg">View 2< /a> < a href="#view3" class="btn btn-danger btn-lg">View 3< /a>
view2.html
< h3>This is View 2< /h3> < a href="#" class="btn btn-primary btn-lg">View 1< /a> < a href="#view3" class="btn btn-danger btn-lg">View 3< /a>
view3.html
< h3>This is View 3< /h3> < a href="#" class="btn btn-primary btn-lg">View 1< /a> < a href="#view2" class="btn btn-success btn-lg">View 2< /a>
请记住，这三个HTML文件是部分页面，将根据我们在config.js文件中定义的URL注入到shellPage.html中。
定义样式和动画：
通过将CSS应用于视图，让我们的观点更加生动
.view {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.view a { margin-top:50px; }
.view h1 { font-size:60px; }
#heading { color:#333; position:absolute; text-align:center; top:50px; width:100%; }
/* Background and text colors for partial view pages (view1, view2, view3)
------------------------------------------------------------- */
.view1 { background:#bef2de; color:#00907c; }
.view2 { background:#D4D0EA; color:#55316f; }
.view3 { background:#FFCBA4; color:rgba(149, 95, 40, 0.91); }
为了在不同的视图之间进行清晰的过渡，我们将设置CSS z-index属性
.view.ng-leave { z-index:9999; }
.view.ng-enter { z-index:8888; }
现在是时候定义我们的动画了
向左滑动动画
/* slide out left */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-100%); }
}
放大动画
/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
from { opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-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); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(100%); }
to { -webkit-transform: translateX(0); }
}
从底部动画滑入
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
from { -moz-transform:translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
from { -webkit-transform:translateY(100%); }
to { -webkit-transform: translateY(0); }
}
旋转和跌落动画
/* rotate and fall */
@-webkit-keyframes rotateFall {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
0% { -moz-transform: rotateZ(0deg); }
20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
40% { -moz-transform: rotateZ(17deg); }
60% { -moz-transform: rotateZ(16deg); }
100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@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); }
}
旋转报纸动画
/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
应用动画：
现在该应用我们之前定义的动画了
查看1个动画
/* View 1 animations for page leave and enter */
.view1.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
animation:slideOutLeft 0.5s both ease-in;
}
.view1.ng-enter {
-webkit-animation:scaleUp 0.5s both ease-in;
-moz-animation:scaleUp 0.5s both ease-in;
animation:scaleUp 0.5s both ease-in;
}
查看2个动画
/* View 2 animations for page leave and enter */
.view2.ng-leave {
-webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
-moz-transform-origin: 0% 0%;
-moz-animation: rotateFall 1s both ease-in;
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.view2.ng-enter {
-webkit-animation:slideInRight 0.5s both ease-in;
-moz-animation:slideInRight 0.5s both ease-in;
animation:slideInRight 0.5s both ease-in;
}
查看3动画
/* View 3 animations for page leave and enter */
.view3.ng-leave {
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
-moz-transform-origin: 50% 50%;
-moz-animation: rotateOutNewspaper .5s both ease-in;
transform-origin: 50% 50%;
animation: rotateOutNewspaper .5s both ease-in;
}
.view3.ng-enter {
-webkit-animation:slideInUp 0.5s both ease-in;
-moz-animation:slideInUp 0.5s both ease-in;
animation:slideInUp 0.5s both ease-in;
}
我们完成了所有更改。
现在是时候运行应用程序了
运行应用程序
在运行该应用程序时，将显示以下页面：
单击链接，我们将在进入和离开部分页面时看到动画在播放。
可以使用其他各种动画。
