AngularJSAngularJS 动画总结

 

对读了的几乎首稿子的总结,尽量确保逻辑性,不断补充、精简、更凑巧。
末端会列有参考文章地址,方便以后取用。感谢各位作者及翻译者。

  • AngularJS
    动画思考

    • 同等、如何用

        • 1)我们得构建什么
        • 2)如何给它工作
        • 3)开始我们的程序
          • (1)
            文件结构,如下
          • (2) index.html
            :
          • (3) Angular 程序
            app.js:
          • (4) 视图 page-home.html, page-about.html,
            page-contact.html:
          • (5) 为App添加动画作用
            style.css:

            • CSS动画
            • 入及离开动画效果
            • 实际页面的动画效果
          • (6)预览地址:
    • 二、进阶

        • 1)其他类
          class
        • 2)注意事项
    • 参照文档

一律、如何使

以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

AngularJS 1AngularJS 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)预览地址:

二、进阶

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里按钮的在或者显示对题目字数的震慑。

参照文档

  • [原]https://scotch.io/tutorials/animating-angularjs-apps-ngview

    [译]https://www.oschina.net/translate/animating-angularjs-apps-ngview

  • https://docs.angularjs.org/api/ngAnimate

  • http://www.open-open.com/lib/view/open1437529447443.html

相关文章