Vue transx組件切換動畫庫示例詳解

更新時間：2022年07月27日 15:30:20 作者：德萊問前端

這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

來個介紹

先奉上組件庫的名稱：transx
github地址：github.com/tnfe/transx
npm參考: www.npmjs.com/package/tra…
示例地址：codesanbox

安裝

npm install transx
or
yarn add transx

使用

<!-- 包裹動畫元素 -->
<trans-x
  :time="time"
  :delay="delay"
  :autoplay="autoplay"
  :loop="loop"
  :nextTransition="nextTransition"
  :prevTransition="prevTransition"
  ref="transx"
  @over="over"
  @transitionend="transitionEnd"
>
  <div class="comp" v-for="(item, index) in items" :key="index" :index="index + 1"></div>
</trans-x>

import TransX from "transx";
export default {
  components: {
    TransX
  },
  data() {
    return {
      time: 0.6,
      loop: true,
      autoplay: 1000,
      delay: -1,
      nextTransition: "fadeIn",
      prevTransition: "fadeIn",
      defaultIndex: 0
    }
  }
}

支持參數(shù)

參數(shù)	說明	類型	默認值	備注
time	動畫時長	number	0.6	單位秒
loop	是否循環(huán)展現(xiàn)	boolean	true
autoplay	是否自動循環(huán)	boolean, number	false	autoplay傳遞為true時，會賦予默認值1000，單位毫秒
delay	動畫間隔	number	-1
defaultIndex	默認顯示第幾張	number	0
nextTransition	下一個的動畫，動畫種類見下方	string	moveLeftBack
prevTransition	上一個的動畫，動畫種類見下方	string	moveRightBack

支持事件

over - 跳轉(zhuǎn)到了邊界后的回調(diào)，當在第一頁繼續(xù)上翻和在最后一頁繼續(xù)下翻時調(diào)用

  over: function(isEnd) {
    console.log('邊界到了', isEnd);
  }

** 說明：當邊界為翻到第一頁時isEnd為false，當邊界為翻到最后一頁時isEnd為true，

transitionend - 動畫結(jié)束時的回調(diào)，在動畫結(jié)束后調(diào)用，參數(shù)為當前的索引，值從0開始

  transitionEnd: function(currentIndex) {
    console.log("當前到第幾頁了: ", currentIndex);
  }

支持API

goto - 跳轉(zhuǎn)到第幾頁，參數(shù)為頁碼標識，索引從0開始

    this.$refs.transx.goto(3); // 跳轉(zhuǎn)到第四頁

prev - 跳轉(zhuǎn)到上一頁

    // 不傳參
    this.$refs.transx.prev();
    // 傳參
    this.$refs.transx.prev({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 參考下面[支持動畫種類]
    });

next - 跳轉(zhuǎn)到下一頁

    // 不傳參
    this.$refs.transx.next();
    // 傳參
    this.$refs.transx.next({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 參考下面[支持動畫種類]
    });