小程序動(dòng)畫(huà)插件，更方便地將所需的動(dòng)畫(huà)css注入到對(duì)應(yīng)的元素中，使動(dòng)畫(huà)邏輯更可控

動(dòng)畫(huà)類(lèi)型：

• Animation 單元素動(dòng)畫(huà) 只控制一個(gè)元素
• AnimationGroup 多元素 延遲，動(dòng)畫(huà)
• AnimationAssign 指定多元素中其中一個(gè)元素動(dòng)畫(huà)

導(dǎo)入

import {Animation, AnimationGroup, AnimationAssign} from '../../Animation/Animation';

wxml 中添加

    //Animation
    

    //AnimationGroup
    
      {{item}}
    

    // AnimationAssign
    
      {{item}}
    

css 中添加

    .fadeOutToButton-enter{
      opacity: 0.01;
      transform: translateY(-50%);
    }

    .fadeOutToButton-enter.fadeOutToButton-enter-active{
      opacity: 1;
      transform: translateY(0);
      transition: all 1000ms ease-in;
    }


    .fadeOutToButton-exit{
      opacity: 1;
      transform: translateY(0);
    }

    .fadeOutToButton-exit.fadeOutToButton-exit-active{
      opacity: 0.01;
      transform: translateY(50%);
      transition: all 1000ms ease-in;
    }

初始化 在onLoad 函數(shù)中：

  onLoad:function(options){


    //Animation
    this.fadeOutToButton =  new Animation(this,{
      className: 'fadeOutToButton', // 寫(xiě)在css的樣式名
      animationName: 'fade',  // 填寫(xiě)在html中的變量名
      timeOut: 1000, //動(dòng)畫(huà)時(shí)間 和動(dòng)畫(huà)持續(xù)時(shí)間同步
      // delayTime: 1000,  // 延遲時(shí)間
    })

    //AnimationGroup
    this.fadeArr = new AnimationGroup(this,{
      className: 'fadeOutToButton', // 寫(xiě)在css的樣式名
      animationName: 'fadeArr',  // 填寫(xiě)在html中的變量名
      timeOut: 1000, //動(dòng)畫(huà)時(shí)間 和動(dòng)畫(huà)持續(xù)時(shí)間同步
      // delayTime: 1000,  // 延遲時(shí)間
      interval: 200,
    })

    //AnimationAssign
    this.removeAnimation = new AnimationAssign(this,{
      className: 'fadeOutToButton',
      animationName: 'fadeArr',
      timeOut:1000,
    })


  },

調(diào)用 在 onShow 函數(shù)中: （當(dāng)元素一開(kāi)始存在時(shí)）

    onShow: function () {
      this.fadeOutToButton.in()
    },

當(dāng)元素開(kāi)始并不存在 (會(huì)先顯示元素之前先添加上 enter類(lèi))

    // 可傳入延遲時(shí)間 毫秒 不填會(huì)根據(jù)構(gòu)造時(shí)的延遲時(shí)間來(lái)控制
    this.fadeOutToButton.in(1000).then(()=>{
      this.setData({
        boxShow: true,
      })
    })

消除元素 (會(huì)先元素消失之后在消失元素)

    this.fadeOutToButton.out().then(()=>{
      this.setData({
        boxShow: false,
      })
    })