令人惊叹的切换效果：全球最流行的动画切换库
大家好，我是「前端实验室」爱分享的了不起~
页面过渡效果，或者局部切换效果，是前端页面开发中时常遇到的需求。今天要和大家分享的就是一款切换效果非常丰富的工具库：TransX
TransX 简介
TransX 是一个小巧且强大的动画切换库，支持 20+ 种动画切换方式，可用于在应用程序中创建引人注目的页面过渡效果。
它为开发者提供了独特的动画效果和易于使用的 API，使得掌握它变得非常简单。
入门
安装
使用NPM包
npm install transx
or
yarn add transx
使用
这里使用VUE 2.X进行演示。先导入 TransX。
import TransX from "transx";
export default {
name: "App",
data: () => {
return {
list: [
{
img:
"http://ts1.cn.mm.bing.net/th/id/R-C.5ac414a7cb5ee568fb389eb67dd4b177?rik=ISCLDvyqf%2b9Kyg&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50127%2f2945.jpg_wh300.jpg!%2ffh%2f300%2fquality%2f90&ehk=bZhY%2fC%2fdpsb%2buscBw2N7efIaYXnQ7PgI4sPQL3TjeKk%3d&risl=&pid=ImgRaw&r=0",
},
{
img:
"http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9213b07eca806538c58705e29cdda144ac3482d6.jpg",
},
],
currentIndex: 0,
};
},
components: {
TransX,
},
methods: {
...
}
}
再在模板中使用。
<!-- 包裹动画元素 -->
<TransX
:time="0.7"
:delay="0.1"
:loop="true"
:autoplay="true"
:nextTransition="nextTransition"
:prevTransition="prevTransition"
ref="transx"
@over="over"
@transitionend="transitionEnd"
>
<div
class="demo-item"
v-for="(item, index) in list"
:key="index"
:index="index + 1"
>
<img :key="index" width="450" height="300" :src="item.img" />
</div>
</TransX>
API
TransX 的API非常简单，主要是它的钩子方法。
动画跳转方法：跳转上一页、跳转下一页和跳转自定义页。
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", // 参考下面[支持动画种类]
});
goto - 跳转到第几页，参数为页码标识，索引从0开始。
this.$refs.transx.goto(0); // 跳转到第一页
还有就是事件响应。
over - 跳转到了边界后的回调，当在第一页继续上翻和在最后一页继续下翻时调用
over: function(isEnd) {
console.log('边界到了', isEnd);
}
说明：当边界为翻到第一页时isEnd为false，当边界为翻到最后一页时isEnd为true
transitionend - 动画结束时的回调，在动画结束后调用，参数为当前的索引，值从0开始。
transitionEnd: function(currentIndex) {
console.log("当前到第几页了: ", currentIndex);
}
效果
TransX 库支持多种不同的切换效果，例如位移(moveXXX)、旋转(rotateXXX)、缩放(zoomXXX)以及淡入淡出(fadeXXX)等，可以实现各种复杂的过渡效果。
各式各样的效果还有很多，这对于想要突出重点、增加用户体验、或是改善页面流畅度的开发者来说都非常有用。
小结
总的来说，TVransX 是一个新兴的动画切换库，它提供了丰富多彩的切换效果、易用 API、高性能等一系列优点。
如果您正在开发一个应用程序，并希望使用引人注目的动画过渡效果来吸引用户、突出品牌风格或改善页面流畅度，那么 TransX 动画切换库可能是您应该考虑的工具之一。
Github地址：https://github.com/tnfe/transx