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

快捷導(dǎo)航

軟件下載

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

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

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

PHP ASP.NET ASP JavaScript

在線工具

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

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

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

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

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

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

來個(gè)介紹

先奉上組件庫的名稱：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ù)	說明	類型	默認(rèn)值	備注
time	動(dòng)畫時(shí)長	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)畫種類見下方	string	moveLeftBack
prevTransition	上一個(gè)的動(dòng)畫，動(dòng)畫種類見下方	string	moveRightBack

支持事件

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

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

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

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

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

支持API

goto - 跳轉(zhuǎn)到第幾頁，參數(shù)為頁碼標(biāo)識(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", // 參考下面[支持動(dòng)畫種類]
    });

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

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