小程序模板網(wǎng)

小程序動畫插件--漸變效果

發(fā)布時間:2018-04-25 10:21 所屬欄目:小程序開發(fā)教程

小程序動畫插件,更方便地將所需的動畫css注入到對應的元素中,使動畫邏輯更可控

動畫類型:

  • Animation 單元素動畫 只控制一個元素
  • AnimationGroup 多元素 延遲,動畫
  • AnimationAssign 指定多元素中其中一個元素動畫導入
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', // 寫在css的樣式名
      animationName: 'fade',  // 填寫在html中的變量名
      timeOut: 1000, //動畫時間 和動畫持續(xù)時間同步
      // delayTime: 1000,  // 延遲時間
    })

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

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


  },調(diào)用 在 onShow 函數(shù)中: (當元素一開始存在時)
    onShow: function () {
      this.fadeOutToButton.in()
    },
當元素開始并不存在 (會先顯示元素之前先添加上 enter類)
    // 可傳入延遲時間 毫秒 不填會根據(jù)構(gòu)造時的延遲時間來控制
    this.fadeOutToButton.in(1000).then(()=>{
      this.setData({
        boxShow: true,
      })
    })
消除元素 (會先元素消失之后在消失元素)
    this.fadeOutToButton.out().then(()=>{
      this.setData({
        boxShow: false,
      })
    })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24019.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢