vue3实现动画

vue3 实现动画的方法

Vue 3 提供了多种实现动画的方式，包括内置的过渡组件、第三方动画库以及 CSS 动画。以下是几种常见的实现方法。

使用 Vue 内置过渡组件

Vue 3 内置了 <transition> 和 <transition-group> 组件，用于处理元素的进入和离开动画。可以通过 CSS 或 JavaScript 钩子实现动画效果。

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    return { show };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

使用 CSS 动画

Vue 3 完全支持 CSS 动画，可以通过定义 CSS 关键帧动画来实现更复杂的效果。

<template>
  <button @click="animate = !animate">Toggle Animation</button>
  <div :class="{ 'bounce': animate }">Bouncing Element</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const animate = ref(false);
    return { animate };
  }
};
</script>

<style>
.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
</style>

使用第三方动画库

Vue 3 可以轻松集成第三方动画库，如 GSAP 或 Animate.css，以实现更丰富的动画效果。

<template>
  <button @click="animateWithGSAP">Animate with GSAP</button>
  <div ref="box" class="box">GSAP Animation</div>
</template>

<script>
import { ref } from 'vue';
import gsap from 'gsap';

export default {
  setup() {
    const box = ref(null);

    const animateWithGSAP = () => {
      gsap.to(box.value, { x: 100, rotation: 360, duration: 1 });
    };

    return { box, animateWithGSAP };
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
}
</style>

使用 Vue 的 JavaScript 钩子

Vue 的 <transition> 组件提供了 JavaScript 钩子，可以通过这些钩子实现更复杂的动画逻辑。

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <p v-if="show">JavaScript Animation</p>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const beforeEnter = (el) => {
      el.style.opacity = 0;
    };

    const enter = (el, done) => {
      gsap.to(el, {
        opacity: 1,
        duration: 1,
        onComplete: done
      });
    };

    const leave = (el, done) => {
      gsap.to(el, {
        opacity: 0,
        duration: 1,
        onComplete: done
      });
    };

    return { show, beforeEnter, enter, leave };
  }
};
</script>

使用 <transition-group> 实现列表动画

<transition-group> 组件用于实现列表项的动画效果，支持元素的添加、删除和移动动画。

<template>
  <button @click="addItem">Add Item</button>
  <button @click="removeItem">Remove Item</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </transition-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([1, 2, 3, 4, 5]);

    const addItem = () => {
      items.value.push(items.value.length + 1);
    };

    const removeItem = () => {
      items.value.pop();
    };

    return { items, addItem, removeItem };
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

以上方法涵盖了 Vue 3 中实现动画的主要方式，可以根据具体需求选择合适的方法。