angularjs动画-ngAnimate--快速上手使用

Posted 2020-09-08 To-Infinity-And-Bod

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要外部引入 angular-animate.js 库。

1.把ngAnimate依赖注入写入当前的myApp模块中；

<script>

var app = angular.module(‘myApp‘, [‘ngAnimate‘]);

</script>

2.ngAnimate模型的作用：

ngAnimate 模型可以添加或移除 class类。

ngAnimate 模型并不能使 html 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

• ng-show   移除class类为.ng-hide的值
• ng-hide   添加class类为.ng-hide的值
• ng-class  动态绑定一个或多个 CSS 类
• ng-view　 
• ng-include  包含外部的 HTML 文件
• ng-repeat　循环列表
• ng-if      用于在表达式为 false 时移除 HTML 元素
• ng-switch  根据表达式显示或隐藏对应的部分

除了ng-show 和 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-add-active (如果元素将隐藏)
• ng-hide-remove (如果元素将被显示)
• ng-hide-remove-active (如果元素将显示)

3.通常使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，

　　例如使用css过渡：

<style>
div {
    transition: all linear 0.5s;
   
    height: 100px;
}
.ng-hide {
    height: 0;
}
</style>

　　例如使用css动画，更方法，都要考虑到兼容（IE10以上才支持）

<style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>

 

小结：ngAnimate在显示隐藏时，是通过类ng-hide来控制的;其他则是ng-enter 类， ng-leave 属性。现在可以百度一下其他指令的具体用法！