腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

Vue transx組件切換動(dòng)畫庫(kù)示例詳解

更新時(shí)間：2022年07月27日 15:30:20 作者：德萊問(wèn)前端

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

來(lái)個(gè)介紹

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

安裝

npm install transx
or
yarn add transx

使用

<!-- 包裹動(dòng)畫元素 -->
<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ù)	說(shuō)明	類型	默認(rèn)值	備注
time	動(dòng)畫時(shí)長(zhǎng)	number	0.6	單位秒
loop	是否循環(huán)展現(xiàn)	boolean	true
autoplay	是否自動(dòng)循環(huán)	boolean, number	false	autoplay傳遞為true時(shí)，會(huì)賦予默認(rèn)值1000，單位毫秒
delay	動(dòng)畫間隔	number	-1
defaultIndex	默認(rèn)顯示第幾張	number	0
nextTransition	下一個(gè)的動(dòng)畫，動(dòng)畫種類見(jiàn)下方	string	moveLeftBack
prevTransition	上一個(gè)的動(dòng)畫，動(dòng)畫種類見(jiàn)下方	string	moveRightBack

支持事件

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

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

** 說(shuō)明：當(dāng)邊界為翻到第一頁(yè)時(shí)isEnd為false，當(dāng)邊界為翻到最后一頁(yè)時(shí)isEnd為true，

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

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

支持API

goto - 跳轉(zhuǎn)到第幾頁(yè)，參數(shù)為頁(yè)碼標(biāo)識(shí)，索引從0開(kāi)始

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

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

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

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

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