• ngAnimate模块


    ngAnimate模块和ngRoute一样,不属于核心模块,都是需要script引入,然后在模块内依赖注入
    那ngAnimate做了什么?
    ngAnimate 模型可以添加或移除 class 。
    ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
    支持的指令:
    指令    支持动画
    ngRepeat    enter, leave and move
    ngView    enter and leave
    ngInclude    enter and leave
    ngSwitch    enter and leave
    ngIf    enter and leave
    ngClass    add and remove
    ngShow & ngHide    add and remove (the ng-hide class value)
    form    add and remove (dirty, pristine, valid, invalid & all other validations)
    ngModel    add and remove (dirty, pristine, valid, invalid & all other validations)
    那么,怎么使用呢? 本文拿ng-repeat这个指令来做个介绍,其他的一些指令使用方式几乎相同,可类推。
    ng-repeat 主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为:
    [javascript] view plain copy
    <span style="font-family:Microsoft YaHei;font-size:14px;">创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态  
    默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素</span>  
    ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
    其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。
    当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。
    此外, 在动画完成后,HTML 元素的类集合将被移除。例如: 
    ng-hide 指令会添加一下类:
    ng-animate ng-hide-animate ng-hide-add (如果元素将被隐藏) ng-hide-remove (如果元素将显示) ng-hide-add-active (如果元素将隐藏) ng-hide-remove-active (如果元素将显示)
    这样的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger里面的transition-delay的样式时间。
    具体情况还需要我们自己去实践。
    参考:http://www.open-open.com/lib/view/open1437529447443.html
  • 相关阅读:
    Spring Cloud(三):Web服务客户端之Feign
    Spring Cloud(二):Web服务客户端之Ribbon
    Spring Cloud(一):服务注册中心Eureka
    细说Ansible主机清单inventory
    Ansible配置文件ansible.cfg详解
    CentOS 7离线安装Ansible
    Java中的异常处理
    PyQt5Day33--自定义信号+动画
    8. matlab图像处理基础——边缘检测+形态学变换+图像增强
    7. matlab图像处理基础——几何变换+正交变换
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6781447.html
Copyright © 2020-2023  润新知