上一节:
下一节:

  AngularJS 动画

  • 什么是动画

    动画就是 HTML 元素的转换给您运动的幻觉。
    AngularJS 在 CSS 的帮助下提供了动画过渡。
    下面示例演示了选中复选框以隐藏div元素： 
    <body ng-app="ngAnimate">
    勾选隐藏div: <input type="checkbox" ng-model="myCheck">
    <div ng-hide="myCheck"></div>
</body>
    应用程序不应填充动画，但是某些动画可以使应用程序更易于理解。

  • 我需要什么

    为了使您的应用程序可以制作动画，您必须包括 AngularJS Animate 库： 
    <script src="https://cdn.bootcss.com/angular.js/1.3.3/angular-animate.min.js"></script>
    然后，您必须在应用程序中引用 ngAnimate 模块： 
    <body ng-app="ngAnimate">
    或者，如果您的应用程序具有名称，则在应用程序模块中添加 ngAnimate 作为依赖项： 
    <body ng-app="myApp">
    <h1>勾选隐藏div: <input type="checkbox" ng-model="myCheck"></h1>
    <div ng-hide="myCheck"></div>
    <script>
       var app = angular.module('myApp', ['ngAnimate']);
    </script>
</body>

  • ngAnimate 会做什么

    ngAnimate 模块添加和删除类。
    ngAnimate 模块不会为HTML元素设置动画，但是当 ngAnimate 注意到某些事件（例如HTML元素的隐藏或显示）时，该元素将获得一些可用于制作动画的预定义类。
    AngularJS 中添加/删除类的指令是：
    • ng-show
    • ng-hide
    • ng-class
    • ng-view
    • ng-include
    • ng-repeat
    • ng-if
    • ng-switch
    ng-show 和 ng-hide 指令添加或删除 ng-hide 类值。
    其他指令在进入 DOM 时会添加 ng-enter 类值，而从 DOM 中删除时会添加 ng-leave 属性。
    当 HTML 元素更改位置时，ng-repeat 指令还会添加 ng-move 类值。
    此外，在动画过程中，HTML 元素将具有一组类值，动画完成后将删除它们。 示例：ng-hide 指令将添加以下类值：
    • ng-animate
    • ng-hide-animate
    • ng-hide-add （如果元素将被隐藏）
    • ng-hide-remove （如果将显示该元素）
    • ng-hide-add-active （如果该元素将被隐藏）
    • ng-hide-remove-active （如果将显示该元素）
    我们可以使用 CSS过渡 或 CSS动画 为 HTML 元素设置动画。 本教程将向您展示两者。
    要了解有关CSS动画的更多信息，请学习我们的 CSS过渡教程 和 CSS动画教程。

  • CSS 过渡

    CSS 过渡允许您在给定的时间内将 CSS 属性值从一个值平滑更改为另一个值：
    下面示例演示了当 div 元素获得 .ng-hide 类时，过渡将花费0.5秒，并且高度将从 100px 平滑地变为 0： 
    <style>
    div {
        transition: all linear 0.5s;
        background-color: lightblue;
        height: 100px;
    }
    .ng-hide {
        height: 0;
    }
</style>

  • CSS 动画

    CSS 动画允许您在给定的时间内将 CSS 属性值从一个值平滑更改为另一个值：
    下面示例演示了当 div 元素获得 .ng-hide 类时，将运行 myChange 动画，它将平滑地将高度从 100px 更改为 0： 
    <style>
  @keyframes myChange {
    from {
      height: 100px;
    } to {
      height: 0;
    }
  }
  
  div {
    height: 100px;
    background-color: lightblue;
  }
  
  div.ng-hide {
    animation: 0.5s myChange;
  }
</style>
上一节:
下一节: