5 Star 10 Fork 0

Gitee 极速下载 / transx

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/tnfe/transx
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README


一个小巧玲珑的 vue 组件切换动画库, 支持 10 几种动画切换方式, 效果十分炫酷并且非常轻量哦~

fadeInzoomRotateInflipshuttleRight

codesandbox在线调试 https://codesandbox.io/s/practical-sid-0ubim

安装

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); // 跳转到第四页
  • 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", // 参考下面[支持动画种类]
    });

支持的动画种类

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

** 说明:种类较多,示例在这, 试试再选择,说不定有意外惊喜哦~

License

https://opensource.org/licenses/MIT

空文件

简介

TransX 是一个小巧玲珑的 vue 组件切换动画库,支持 10 几种动画切换方式 展开 收起
JavaScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/mirrors/transx.git
git@gitee.com:mirrors/transx.git
mirrors
transx
transx
master

搜索帮助