AngularJS 动画总括

 

对读过的几篇小说的下结论,尽量保障逻辑性,不断填补、精简、矫正。
末尾会列出参考小说地址,方便以往取用。多谢各位小编以及翻译者。

一、如何运用

在angular中我们利用 ngAnimate 添加过渡和动画片效果。

透过贰个为 ng-view 添加动画成效的例证来演示使用方法

1)大家必要打造什么

  • 使用 ngRoute 来为大家的页面路由

  • 使用 ngAnimate 来为页面创造动画效果

  • 对页面使用 CSS Animations

  • 当大家离开或进入试图时,大家的每二个页面会有例外的动画片效果

2)怎么样让它工作

ngAnimate 会依照是进入照旧距离视图来为区其他Angular
指令(directive)添加和移除不一样的CSS类名。例如,当大家加载网站时,无论ng-view中填充了何等都会获取二个.ng-enter的类名。

大家所须求做的就是给.ng-enter
类名添加CSS动画效果,该动画在进入的时候会自行生效。

ngAnimate 可以动用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow,
ngHide, ngView 以及 ngClass

图片 1图片 2

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-about.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)其他类 class

  • ng-enter-activeng-leave-active

    对于 ng-repeat
    紧假如对三个list的来得,那个要素是是被创设出来参加到DOM结构中去的,那么,它的卡通片进程为

    创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态
    默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
    

    可以由此设置.ng-enter(.ng-leave) 和
    .ng-enter-active(.ng-leave-active)
    的体裁,加上css3的动画片来显示出动画,如:

    <!-- HTML片段 -->
    <div ng-init="users = [1,2,3,4,5]"></div>
    <input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
    <ul>
    <li class="item" ng-repeat="user in users | filter: u as result">
      {{user}}
    </li>
    </ul>
    
    /* css片断 */
    /*ng-repeat的元素*/
    
    .item{
      -webkit-transition: all linear 1s;
      -o-transition: all linear 1s;
      transition: all linear 1s;
    }
    /*动画开始前*/
    .item.ng-enter{
      opacity:0;
    }
    /*动画过程*/
    .item-ng-enter-active{
      opacity:1;
    }
    
  • ng-enter-stagger

    地点的机能是对负有因素同时使用,恐怕实际拔取中需求有三个顺序的渐变出现的成效,这时候可以安装ng-enter-stagger来实现.

    /*不同时出现*/
    .item.ng-enter-stagger {
        transition-delay:0.5s;
        transition-duration:0;
    }
    
  • ng-enter-prepare

    那是三个良好的类,可以在实际上的动画起始此前预防不必要的闪光的内容。

    <div ng-class="{red: myProp}">
     <div ng-class="{blue: myProp}">
      <div class="message" ng-if="myProp"></div>
     </div>
    </div>
    

    大概在输入动画时期,.message div将在开首动画化以前被急促地见到。
    在那种气象下,可以向CSS添加底下的体制,以有限支撑在动画运转前成分保持隐身

    .message.ng-enter-prepare {
      opacity: 0;
    }
    
  • ng-animate-ref

    透过利用名为ng-animate-ref的属性配对成分,来跨应用程序的协会区域(如视图)之间交叉动画成分的功力。
    tips:本人精晓为,跨页面的配对成分之间的接入效果
    合法例子:https://plnkr.co/edit/?p=preview

2)注意事项

  • 使用 ng-hide 时需加上

    .ng-hide-add,.ng-hide-remove{ 
    display: block!important; 
    }
    

    幸免须臾间隐形

  • 关于ng-showng-hideng-if的区别(有机遇单独写一篇总计)。

    简单来讲地说:
    ng-if:成分存在不存在。
    ng-showng-hide:元素呈现不展现(本身是存在的)。

    诸如:列表最终一行成分的上边框隐藏,ng-showng-hide会出难题。

    li:last-child{
    border-bottom:none;
    }
    

    又比如:ionic的header里按钮的存在恐怕展现对标题字数的震慑。

参照文档

相关文章