vue实现弹出动画

使用 Vue Transition 组件实现弹出动画

Vue 提供了内置的 Transition 组件，可以方便地为元素添加进入/离开的过渡效果。以下是一个基本的弹出动画实现：

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="pop">
    <div v-if="show" class="popup">Popup Content</div>
  </Transition>
</template>

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

<style>
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

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

.pop-enter-from,
.pop-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
</style>

使用 CSS 动画实现弹跳效果

如果需要更有弹性的动画效果，可以使用 CSS keyframes：

.pop-enter-active {
  animation: bounce-in 0.5s;
}
.pop-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

使用第三方动画库

对于更复杂的动画效果，可以集成第三方动画库如 Animate.css：

<template>
  <Transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <div v-if="show" class="popup">Popup Content</div>
  </Transition>
</template>

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

实现模态框弹出动画

结合 Vue 的 Teleport 组件实现模态框弹出效果：

<template>
  <button @click="showModal = true">Open Modal</button>

  <Teleport to="body">
    <Transition name="modal">
      <div v-if="showModal" class="modal-mask">
        <div class="modal-container">
          <h3>Modal Title</h3>
          <p>Modal Content</p>
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
}

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

.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.8);
}
</style>

使用 Vue 3 的 Composition API 实现动画控制

在 Vue 3 中可以使用 Composition API 更精细地控制动画：

<template>
  <button @click="toggle">Toggle</button>
  <Transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="show" class="box"></div>
  </Transition>
</template>

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

const show = ref(false)

function toggle() {
  show.value = !show.value
}

function beforeEnter(el) {
  el.style.opacity = 0
  el.style.transform = 'scale(0)'
}

function enter(el, done) {
  const animation = el.animate([
    { opacity: 0, transform: 'scale(0)' },
    { opacity: 1, transform: 'scale(1.1)' },
    { opacity: 1, transform: 'scale(1)' }
  ], {
    duration: 500
  })
  animation.onfinish = done
}

function leave(el, done) {
  const animation = el.animate([
    { opacity: 1, transform: 'scale(1)' },
    { opacity: 0, transform: 'scale(0)' }
  ], {
    duration: 300
  })
  animation.onfinish = done
}
</script>