vue实现左右切换动画

实现左右切换动画的方法

在Vue中实现左右切换动画可以通过Vue的过渡系统结合CSS动画或第三方动画库完成。以下是几种常见方法：

使用Vue的<transition>组件

Vue内置的<transition>组件可以方便地添加进入/离开过渡效果。结合CSS的transform属性实现左右滑动效果。

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="slide">
      <div v-if="show" class="box">内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

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

使用Vue的<transition-group>实现列表切换

当需要在多个元素间切换时，可以使用<transition-group>组件。

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition-group name="list" tag="div">
      <div v-if="current === 1" key="1" class="item">第一页</div>
      <div v-else-if="current === 2" key="2" class="item">第二页</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1
    }
  },
  methods: {
    toggle() {
      this.current = this.current === 1 ? 2 : 1;
    }
  }
}
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
  position: absolute;
}
.list-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.list-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.item {
  position: relative;
}
</style>

使用CSS动画库

可以结合Animate.css等CSS动画库快速实现专业级动画效果。

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition
      enter-active-class="animate__animated animate__slideInLeft"
      leave-active-class="animate__animated animate__slideOutRight"
    >
      <div v-if="show" class="box">内容</div>
    </transition>
  </div>
</template>

<script>
import 'animate.css';
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

使用Vue过渡模式

在多个元素切换时，使用mode="out-in"或mode="in-out"可以控制动画顺序。

<transition name="slide" mode="out-in">
  <component :is="currentView"></component>
</transition>

使用JavaScript钩子实现更复杂动画

通过JavaScript钩子可以结合GSAP等动画库实现更复杂的动画效果。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <div v-if="show">内容</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transform = 'translateX(100%)';
  },
  enter(el, done) {
    gsap.to(el, {
      x: 0,
      opacity: 1,
      duration: 0.5,
      onComplete: done
    });
  },
  leave(el, done) {
    gsap.to(el, {
      x: -100,
      opacity: 0,
      duration: 0.5,
      onComplete: done
    });
  }
}

以上方法可以根据项目需求选择使用，Vue的过渡系统提供了灵活的方式来实现各种动画效果。