当前位置：首页 > VUE

vue 实现左右切换动画

2026-02-23 09:22:10VUE

实现左右切换动画的方法

在Vue中实现左右切换动画可以通过多种方式完成，包括使用Vue的过渡系统、CSS动画或第三方库。以下是几种常见的方法：

使用Vue的过渡和动画

Vue提供了内置的过渡系统，可以通过<transition>或<transition-group>组件实现元素进入和离开的动画效果。

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="slide" mode="out-in">
      <div :key="currentView">
        {{ currentView }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: '左',
    };
  },
  methods: {
    toggle() {
      this.currentView = this.currentView === '左' ? '右' : '左';
    },
  },
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用CSS动画

可以通过定义CSS动画来实现更复杂的左右切换效果。

<template>
  <div>
    <button @click="toggle">切换</button>
    <div :class="['content', direction]">
      {{ currentView }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: '左',
      direction: 'left',
    };
  },
  methods: {
    toggle() {
      this.direction = this.direction === 'left' ? 'right' : 'left';
      this.currentView = this.currentView === '左' ? '右' : '左';
    },
  },
};
</script>

<style>
.content {
  transition: transform 0.5s;
}
.left {
  transform: translateX(0);
}
.right {
  transform: translateX(100%);
}
</style>

使用第三方库（如Vue Router）

如果是在Vue Router中实现页面切换的左右动画，可以使用类似的方法。

<template>
  <transition name="slide" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用动态组件

动态组件也可以通过过渡实现左右切换效果。

vue 实现左右切换动画

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="slide" mode="out-in">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
import LeftComponent from './LeftComponent.vue';
import RightComponent from './RightComponent.vue';

export default {
  components: {
    LeftComponent,
    RightComponent,
  },
  data() {
    return {
      currentComponent: 'LeftComponent',
    };
  },
  methods: {
    toggle() {
      this.currentComponent = this.currentComponent === 'LeftComponent' ? 'RightComponent' : 'LeftComponent';
    },
  },
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>