Vue?transx組件切換動畫庫怎么使用

本篇內容主要講解“Vue transx組件切換動畫庫怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue transx組件切換動畫庫怎么使用”吧!

安裝

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
    }
  }
}

支持參數

支持事件

• over - 跳轉到了邊界后的回調，當在第一頁繼續上翻和在最后一頁繼續下翻時調用

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

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

• transitionend - 動畫結束時的回調，在動畫結束后調用，參數為當前的索引，值從0開始

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

支持API

• goto - 跳轉到第幾頁，參數為頁碼標識，索引從0開始

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

• prev - 跳轉到上一頁

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

• next - 跳轉到下一頁

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

支持的動畫類型

目前共支持24種動畫類型

說明

• 目前只支持Vue2，后續會升級支持Vue3，

• 在使用過程中如果遇到什么問題，可以隨時提交issue，issue直達

到此，相信大家對“Vue transx組件切換動畫庫怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！