zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Win10系统怎么彻底关闭Windows defender?
    用 winrar 解压 haozip 分卷压缩包的方法
    关闭WordPress自动保存和文章修订功能
    WordPress中Invalid argument supplied for foreach()错误原因及解决办法
    C#PDF转图片
    VS使用Nuget教程详解 Visual Studio 安装第三方的组件库
    kafka源码阅读环境搭建
    博客园主题美化
    官方文档
    [UGUI]UI特效裁剪
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6781447.html
Copyright © 2011-2022 走看看