亲宝软件园·资讯

展开

Vue transx切换动画库

德莱问前端 人气:0

来个介绍

安装

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动画时长number0.6单位秒
loop是否循环展现booleantrue 
autoplay是否自动循环boolean, numberfalseautoplay传递为true时,会赋予默认值1000,单位毫秒
delay动画间隔number-1 
defaultIndex默认显示第几张number0 
nextTransition下一个的动画,动画种类见下方stringmoveLeftBack 
prevTransition上一个的动画,动画种类见下方stringmoveRightBack 

支持事件

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

** 说明:当边界为翻到第一页时isEnd为false,当边界为翻到最后一页时isEnd为true,

  transitionEnd: function(currentIndex) {
    console.log("当前到第几页了: ", currentIndex);
  }

支持API

    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", // 参考下面[支持动画种类]
    });

支持的动画类型

目前共支持24种动画类型,具体选择哪种动画类型,可以参考例子codesanbox,多试试,说不定有意外惊喜哦。下面放几个例子给大家看看:

fadeIn

flip

shuttleRight

zoomRotateIn

说明

加载全部内容

相关教程
猜你喜欢
用户评论