TransX a small and exquisite vue component switching animation library

TNTWeb-the full name of Tencent News front-end team, the small partners in the group have practiced and accumulated in the front-end fields such as Web front-end, NodeJS development, UI design, and mobile APP.

At present, the team mainly supports the front-end development of Tencent News's various businesses. In addition to business development, it has also accumulated some front-end infrastructure to empower business efficiency and product innovation.

The team advocates open source and co-construction, and has a variety of technical experts. The team’s Github address: https://github.com/tnfe

1. Introduction

• First offer the name of the component library: transx
• github address: github.com/tnfe/transx
• npm reference: www.npmjs.com/package/tra...
• Example address: codesanbox

Two, installation

npm install transx
or
yarn add transx
复制代码

Three, use

<!-- 包裹动画元素 -->
<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
    }
  }
}
复制代码

Four, support parameters

parameter	illustrate	type	Defaults	Remark
time	Animation duration	number	0.6	Unit second
loop	Whether to display in a loop	boolean	true
autoplay	Whether to automatically cycle	boolean, number	false	When autoplay is passed as true, the default value of 1000 will be assigned, in milliseconds
delay	Animation interval	number	-1
defaultIndex	Display the first few pictures by default	number	0
nextTransition	For the next animation, see below for animation types	string	moveLeftBack
prevTransition	The animation of the previous one, see below for the types of animations	string	moveRightBack

Four, support events

• over -the callback after jumping to the boundary, it is called when the first page continues up and the last page continues down

  over: function(isEnd) {
    console.log('边界到了', isEnd);
  }
复制代码

** Note: when the boundary is turning to the first page, isEnd is false, when the boundary is turning to the last page, isEnd is true,

• transitionend -Callback at the end of the animation, called after the end of the animation, the parameter is the current index, and the value starts from 0

  transitionEnd: function(currentIndex) {
    console.log("当前到第几页了: ", currentIndex);
  }
复制代码

Five, support API

• goto -Jump to the first few pages, the parameter is the page number identification, the index starts from 0

    this.$refs.transx.goto(3); // 跳转到第四页
复制代码

• prev -Jump to the previous page

    // 不传参
    this.$refs.transx.prev();
    // 传参
    this.$refs.transx.prev({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });
复制代码

• next -Jump to the next page

    // 不传参
    this.$refs.transx.next();
    // 传参
    this.$refs.transx.next({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });
复制代码

Six, supported animation types

Currently, 24 animation types are supported. For the specific animation type to choose, please refer to the example codesanbox . Try more, maybe there will be unexpected surprises. Here are a few examples for everyone to see:

• fadeIn

• flip

• shuttleRight

• zoomRotateIn

Seven, description

• Currently only supports Vue2, and will be upgraded to support Vue3 in the future.
• If you encounter any problems during use, you can submit an issue at any time, issue directly to

8. Team

TNTWeb-Tencent news front-end team, TNTWeb is committed to the industry's cutting-edge technology exploration and the improvement of team members' personal capabilities. The latest high-quality content in the field of small programs and web front-end technology has been compiled for front-end developers, updated weekly✨, welcome to star, github address: https://github.com/tnfe/TNT-Weekly