一个小巧玲珑的 vue 组件切换动画库

大家好，我是源码哥。今天给大家分享一个好玩的开源项目 -- transx：

一个小巧玲珑的 vue 组件切换动画库, 支持 20 几种动画切换方式，切换效果非常炫酷。

话不多说，先看几个示例效果图。

支持的动画种类

• fadeIn: 淡入
• fadeOut: 淡出
• flip: 翻转
• moveLeftQuart:
• moveRightQuart:
• moveLeftBack:
• moveRightBack:
• zoomOutBack:
• zoomInBack:
• rotateLeftBack:
• rotateRightBack:
• rotateLeftTop:
• rotateRightTop:
• zoomRotateIn:
• zoomRotateOut:
• shuttleLeft:
• shuttleRight:
• shuttleDown:
• shuttleUp:
• rollLeft:
• rollRight:
• scaleXLeft:
• scaleXRight:

安装

可以通过以下指令，安装这款动画库。

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

提供的服务

transx 提供了以下支持服务，可以用起来！

• 支持参数
• 支持事件
• 支持 API

1. 支持参数

transx  支持以下参数

参数	说明	类型	默认值	备注
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

2. 支持事件

• over - 跳转到了边界后的回调，当在第一页继续上翻和在最后一页继续下翻时调用

• transitionend - 动画结束时的回调，在动画结束后调用，参数为当前的索引，值从0开始

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

资源获取

点击下方名片关注，回复【4006】，即可获取项目源码

或者扫描下方二维码关注，回复【4006】