AngularJS 动画制作详细实现代码

2021年3月12日12:56:24 发表评论 717 次浏览

使用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 >

输出如下:

之前:

AngularJS |动画制作1

后:

AngularJS |动画制作2
AngularJS |动画制作3

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: