AngularJS 动画制作详细实现代码

使用ngAnimate模块在Angular.Js中创建动画效果, 该模块支持基于CSS的动画。
动画是用来产生动态运动效果的东西。在这里, 使用ngAnimate模块将HTML转换为运动效果, 从而为我们提供Javascript和CSS的组合效果。
使用此示例代码, 通过选中复选框来显示隐藏分区/部分的演示。
将使用AngularJs的Animation引入图片的步骤：
在脚本标签中包括Angular.Js动画库, 如下所示：

【AngularJS 动画制作详细实现代码】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 >

输出如下：
之前：