【Vue 3】一个小巧玲珑的 Vue 组件切换动画库，开源且免费！！

npm install -g @vue/cli

vue create my-transx-app

cd my-transx-app
npm install transx

import { createApp } from 'vue';
import App from './App.vue';
import TransX from 'transx';
const app = createApp(App);
app.use(TransX);
app.mount('#app');

<template>
  <div>
    <button @click="prev">Previous</button>
    <button @click="next">Next</button>
    <TransX ref="transx" :defaultIndex="currentIndex" :time="0.6">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
    </TransX>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const currentIndex = ref(0);
const items = ref(['Page 1', 'Page 2', 'Page 3']);
const transx = ref(null);
const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + items.value.length) % items.value.length;
  transx.value.prev();
};
const next = () => {
  currentIndex.value = (currentIndex.value + 1) % items.value.length;
  transx.value.next();
};
</script>
<style>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
  margin: 10px 0;
}
</style>

<template>
  <TransX ref="transx" @over="onOver" @transitionend="onTransitionEnd" :time="0.6">
    <div v-for="(item, index) in items" :key="index" class="item">
      {{ item }}
    </div>
  </TransX>
</template>
<script setup>
import { ref } from 'vue';
const items = ref(['Page 1', 'Page 2', 'Page 3']);
const onOver = (isEnd) => {
  console.log('边界到了', isEnd);
};
const onTransitionEnd = (currentIndex) => {
  console.log('当前到第几页了: ', currentIndex);
};
</script>