给大家推荐一款Vue组件切换动画库__Vue.js
发布于 2 个月前 作者 banyungong 255 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

问个好

hello,大家好,我是德莱问,又和大家见面了,年后开工在即,新的一年新的气象,祝大家新年快乐,牛年大吉。

欢迎关注我的github,文章的更新和发布第一时间会在github进行

这是博客地址,欢迎+star

来个介绍

安装

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

支持的动画类型

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

  • fadeIn

  • flip

  • shuttleRight

  • zoomRotateIn

说明

  • 目前只支持Vue2,后续会升级支持Vue3,
  • 在使用过程中如果遇到什么问题,可以随时提交issue,issue直达

the last

谢谢大家阅读,再次祝大家新年快乐,牛年大吉

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 德莱问 原文链接:https://juejin.im/post/6929808677561958407

回到顶部