vue实现弹出动画

Vue 实现弹出动画的方法

使用 Vue 过渡（Transition）组件

Vue 提供了内置的 <transition> 组件，可以方便地实现元素的进入和离开动画。通过定义 CSS 过渡类名，可以实现弹出效果。

<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.1);
}

.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.8);
}
</style>

使用 CSS 动画

可以通过定义 CSS 动画关键帧来实现更复杂的弹出效果。

.pop-enter-active {
  animation: pop-in 0.3s;
}

.pop-leave-active {
  animation: pop-out 0.3s;
}

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

@keyframes pop-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

使用 JavaScript 钩子

对于需要更精细控制的动画，可以使用 Vue 过渡的 JavaScript 钩子。

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-if="show" class="popup">Popup Content</div>
  </transition>
</template>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'scale(0.8)'
    },
    enter(el, done) {
      gsap.to(el, {
        duration: 0.3,
        opacity: 1,
        scale: 1,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: 0.3,
        opacity: 0,
        scale: 0.8,
        onComplete: done
      })
    }
  }
}
</script>

使用第三方动画库

可以集成第三方动画库如 Animate.css 来实现更多预定义的动画效果。

<template>
  <button @click="show = !show">Toggle</button>
  <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 过渡模式

当需要处理多个元素的过渡时，可以使用过渡模式来避免同时执行进入和离开动画。

<transition name="pop" mode="out-in">
  <div v-if="show" key="popup">Popup Content</div>
  <div v-else key="empty">No Content</div>
</transition>

以上方法可以根据具体需求选择使用，CSS 过渡适合简单效果，JavaScript 钩子适合复杂动画，第三方库则提供了丰富的预定义动画。