Vue transx组件切换动画库怎么使用

发布时间:2022-07-28 09:58:48 作者:iii
来源:亿速云 阅读:135

本篇内容主要讲解“Vue transx组件切换动画库怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue transx组件切换动画库怎么使用”吧!

安装

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种动画类型

说明

到此,相信大家对“Vue transx组件切换动画库怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. vue组件库的示例分析
  2. vue实现循环切换动画

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:nvm版本导致npm install报错Unexpected token '.'如何解决

下一篇:Redis安全策略实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》