TransX 一個小巧玲瓏的 vue 元件切換動畫庫

TNTWeb - 全稱騰訊新聞前端團隊，組內小夥伴在Web前端、NodeJS開發、UI設計、移動APP等大前端領域都有所實踐和積累。
目前團隊主要支援騰訊新聞各業務的前端開發，業務開發之餘也積累沉澱了一些前端基礎設施，賦能業務提效和產品創新。
團隊倡導開源共建，擁有各種技術大牛，團隊Github地址：https://github.com/tnfe

一、介紹

先奉上元件庫的名稱：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
    }
  }
}
複製程式碼

四、支援引數

引數	說明	型別	預設值	備註
time	動畫時長	number	0.6	單位秒
loop	是否迴圈展現	boolean	true
autoplay	是否自動迴圈	boolean, number	false	autoplay傳遞為true時，會賦予預設值1000，單位毫秒
delay	動畫間隔	number	-1
defaultIndex	預設顯示第幾張	number	0
nextTransition	下一個的動畫，動畫種類見下方	string	moveLeftBack
prevTransition	上一個的動畫，動畫種類見下方	string	moveRightBack

四、支援事件

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); // 跳轉到第四頁
複製程式碼

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

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