AngularJS |动画制作

使用ngAnimate模块在Angular.Js中创建动画效果，该模块提供对基于CSS的动画的支持。
动画是用来产生动态运动效果的东西。在这里，使用ngAnimate模块将HTML转换为运动效果，从而为我们提供Javascript和CSS的组合效果。

使用此示例代码，通过选中复选框来显示隐藏分区/部分的演示。

将使用AngularJs的Animation引入图片的步骤：

• 在脚本标签中包括Angular.Js动画库，如下所示：

  src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”

• 将body标签内的ngAnimate模块引用为：

  ng-app=”ngAnimate”

• ngAnimate模块添加和删除类。在AngularJS中使用的添加/删除类的指令是：

  ng-show, ng-hide

示例：以下是Angular.Js动画的实现。

    div {
        transition: 0.6s;
        border-radius: 500%;
        height: 250px;
        width: 250px;
        background-color: red;
        display: inline-block;
    }
      
    .ng-hide {
        background-color: yellow;
        top: 5px;
        left: 100px;
    }

    

  
    

  
  

  
    Hide the Circle 
      
  
  
    
  

  

输出：
前：

后：