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动画的实现。

< html >
< style >
     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;
     }
</ style >
    
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
   </ script >
    
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js" >
   </ script >
  
< body ng-app = "ngAnimate" >
  
     < h1 >Hide the Circle 
       < input type = "checkbox" 
              ng-model = "myCheck" >
   </ h1 >
  
     < div ng-hide = "myCheck" ></ div >
  
</ body >
  
</ html >

输出如下：

之前：

后：

---