Vue里的过渡和动画搞懂指南：切换切换，舞动人生！

前端

2024-01-03 19:47:08

揭秘 Vue 中过渡与动画的精彩世界，让你的应用灵动飞舞

在 Vue.js 的舞台上，过渡与动画宛如舞者手中的彩带，赋予你的应用灵动与魅力。让我们踏上这趟舞蹈之旅，探索过渡与动画的奥秘，点亮你的应用，让它在用户面前尽情起舞。

过渡：舞者之间的优雅切换

过渡让组件间的切换宛如舞者之间的交替出场，丝滑顺畅。指定过渡样式（如淡入淡出、缩放、旋转），让组件的变换化身为视觉盛宴。

动画：组件的灵动演绎

动画让组件随着时间的推移翩翩起舞，展现属性（位置、颜色、大小）的精彩变化。指定动画属性（时间、延迟、循环次数），让组件的舞步更加丰富多彩。

在组件中舞动：过渡与动画的实践

在组件中使用过渡，赋予它灵动，切换自如：

<template>
  <transition name="fade">
    <div v-if="show">
      Hello World!
    </div>
  </transition>
</template>

用动画点缀组件，让它随心舞动：

<template>
  <div v-if="show"
    :style="{
      animation: 'spin 1s linear infinite',
      transform: 'rotate(360deg)'
    }"
  >
    Hello World!
  </div>
</template>

进阶舞步：释放过渡与动画的无限可能

组合过渡与动画：舞池中的默契配合

组合过渡与动画，让组件在舞台上相得益彰。通过 transition-group，组件切换时呈现不同的过渡效果，同时属性变化伴随着灵动的动画：

<template>
  <transition-group name="fade" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </transition-group>
</template>

过渡与动画钩子：舞台上的幕后操控

过渡与动画钩子犹如舞台导演，让组件在关键时刻闪耀夺目。通过 before-enter、enter、leave 等钩子，为组件进入、离开舞台编排特殊效果：

<template>
  <transition name="fade">
    <div v-if="show">
      Hello World!
    </div>
  </transition>
</template>

<script>
export default {
  mounted() {
    this.$refs.transition.beforeEnter = (el) => {
      el.style.opacity = 0;
    };

    this.$refs.transition.enter = (el, done) => {
      TweenMax.to(el, 0.5, { opacity: 1, onComplete: done });
    };

    this.$refs.transition.leave = (el, done) => {
      TweenMax.to(el, 0.5, { opacity: 0, onComplete: done });
    };
  }
};
</script>