zoukankan      html  css  js  c++  java
  • ng animate

    要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块。如:

    var module1 = angular.module('myApp',['ngAnimate']);

    指令对动画支持情况如下

    Directive    Supported Animations
    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 主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为:

    创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态
    默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素

    给ng-repaet创建的元素都添加一个类名,--例如item
    然后就可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式,加上css3的动画来显示出动画,如:
    .item{
      -webkit-transition: all linear 1s;
      -o-transition: all linear 1s;
      transition: all linear 1s;
    }
    /*动画开始前*/
    .item.ng-enter{
      opacity:0;
    }
    /*动画过程*/
    .item-ng-enter-active{
      opacity:1;
    }

    这样的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger来实现.

    /*不同时出现*/
    .item.ng-enter-stagger {
        transition-delay:0.5s;
        transition-duration:0;
    }

    如果这些依然不能满足,还可以使用js

    m1.animation('.item',function(){
        return {
            addClass : function(element,sClass,done){
                //console.log(element);
                //console.log(sClass);
                //console.log(done);
                $(element).animate({width:0,height:0},1000,done);
            },
            removeClass : function(element,sClass,done){
                $(element).css({width:0,height:0});
                $(element).animate({width:200,height:200},1000,done);
            }
        };
    });
  • 相关阅读:
    zbb20180929 dubbo+zookeeper
    zbb20180929 Linux高可用之Keepalived
    zbb20180929 zk Zookeeper的功能以及工作原理
    zbb20180927 Union与Union All的区别
    zbb20180927 MySQL MyISAM InnoDB区别
    zbb20180921 spring事物的七种事物传播属性行为及五种隔离级别
    zbb20180921 java,md5,MD5加密+加盐
    zbb20180921 java,js,javascript 前端加密后端解密Base64通用加密处理
    zbb20180921 springboot 全局异常处理 404 500
    zbb20180919 db,mysql MySQL慢查询
  • 原文地址:https://www.cnblogs.com/toodeep/p/5015471.html
Copyright © 2011-2022 走看看