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);
            }
        };
    });
  • 相关阅读:
    Go 场景
    sourcetree clone 提示url无效
    简单去重比较/复杂数据去重处理
    vue组件之间的通信
    js-执行机制之同步、异步、宏任务、微任务
    react生命周期
    git push被忽略的文件 处理
    请求头的属性
    运算精度问题https://blog.csdn.net/smile_ping/article/details/80284969
    react中状态提升
  • 原文地址:https://www.cnblogs.com/toodeep/p/5015471.html
Copyright © 2011-2022 走看看