您好,登录后才能下订单哦!
本篇内容主要讲解“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 | 动画时长 | 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); }
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种动画类型
目前只支持Vue2,后续会升级支持Vue3,
在使用过程中如果遇到什么问题,可以随时提交issue,issue直达
到此,相信大家对“Vue transx组件切换动画库怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。