Vue过度与动画的使用及说明

<template>
  <div>
    <button @click="show = !show">切换显示</button>

    <transition name="fade">
      <p v-if="show">这是一段淡入淡出的文字</p>
    </transition>
  </div>
</template>

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active {
  transition: all 0.3s ease-out;
}

.slide-leave-active {
  transition: all 0.3s ease-in;
}

.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

<transition name="slide">
  <p v-if="show">我从侧面滑进来啦！</p>
</transition>

.scale-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-leave-active {
  transition: all 0.2s linear;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

<transition name="scale">
  <div class="modal" v-if="modalVisible">
    <h3>欢迎弹窗</h3>
    <button @click="modalVisible = false">关闭</button>
  </div>
</transition>

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <p v-if="show" ref="animatedText">Hello Vue!</p>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transform = 'translateY(-20px)'
  },
  enter(el, done) {
    // 使用 setTimeout 模拟动画
    setTimeout(() => {
      el.style.transition = 'all 0.4s ease'
      el.style.opacity = 1
      el.style.transform = 'translateY(0)'
      done() // 动画结束回调
    }, 10)
  },
  leave(el, done) {
    el.style.transition = 'all 0.3s ease'
    el.style.opacity = 0
    el.style.transform = 'translateY(20px)'
    setTimeout(done, 300)
  }
}

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

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 列表项之间的间隔动画 */
.list-move {
  transition: transform 0.3s;
}

.fade-enter-active {
  transition: opacity 0.3s; /* 必须有 */
}

<li 
  v-for="(item, index) in items" 
  :key="item.id"
  :style="{ transitionDelay: index * 50 + 'ms' }"
>
  {{ item.text }}
</li>

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

<transition mode="out-in">
  <component :is="view" />
</transition>

<transition
  enter-from-class="custom-enter-from"
  enter-active-class="custom-enter-active"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
>
  <p v-if="show">使用自定义类名</p>
</transition>

npm install animate.css

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <p v-if="show">使用 Animate.css 动画</p>
</transition>