常用动画在这里！

“这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战”

其实我们在业务迭代的过程中，常常会编写一些动画。如果这些动画临时需要你手写的话可能会遇到一些困难，所以在这里整理了一些常用的动画，方便之后需要的时候直接拿过来使用。

动画1

<script lang="ts" setup>
import { reactive, ref } from 'vue'

defineProps({
  msg: String
})

const state = reactive({show: false})

function handleClick () {
  state.show = !state.show
  setTimeout(() => {
    state.show = !state.show
  }, 1000)
}
</script>

<template>
  <button @click="handleClick">显示/隐藏</button>
  <div>hello</div>
  <transition name="back">
    <div class="animate" v-if="state.show">欢迎回来</div>
  </transition>
</template>

<style scoped>
@keyframes zoom-enter {
  0% {
    transform: scale(0)
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }

}

@keyframes zoom-leave {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
  }
}

.animate {
  background: pink;
  border-radius: 12px;
  display: inline-block;
  animation: zoom 3s;
  text-align: center;
  padding: 5px 12px;
  transform-origin: center bottom;
}
.back-enter-active {
  animation: zoom-enter 0.3s;
}
.back-leave-active {
  animation: zoom-leave 0.3s;
}
</style>
复制代码

动画2

<script lang="ts" setup>
import { reactive, ref } from 'vue'

defineProps({
  msg: String
})

const state = reactive({show: false})

function handleClick () {
  state.show = !state.show
}
</script>

<template>
  <button @click="handleClick">显示/隐藏</button>
  <div>hello</div>
  <div class="animate" v-if="state.show">
    <img width="24" alt="Vue logo" src="../assets/logo.png" />
  </div>
  <transition name="slide-fade">
    <p class="animate2" v-if="state.show">欢迎回来</p>
  </transition>
  
</template>

<style scoped>
@keyframes zoom-enter {
  0% {
    transform: scale(0)
  }
  100% {
    transform: scale(1);
  }
}

.animate {
  border-radius: 12px;
  display: inline-block;
  animation: zoom-enter 0.3s;
  text-align: center;
  padding: 5px;
  vertical-align: -webkit-baseline-middle;
}
.animate2 {
  border-radius: 12px;
  display: inline-block;
  text-align: left;
  transform-origin: center bottom;
  vertical-align: middle;
  overflow: hidden;
  width: 88px;
  white-space: nowrap;
}
.slide-fade-enter-active {
  transition: width 1s ease 0.3s;
}
.slide-fade-enter-from {
  width: 0;
}
.slide-fade-enter-to {
  width: 88px;
}
</style>

复制代码

动画3

<script lang="ts" setup>
import { reactive, ref } from 'vue'

defineProps({
  msg: String
})

const state = reactive({show: false})

function handleClick () {
  state.show = !state.show
}
</script>

<template>
  <button @click="handleClick">显示/隐藏</button>
  <div>hello</div>
  <transition name="back">
    <div class="animate" v-if="state.show">欢迎回来</div>
  </transition>
</template>

<style scoped>
.animate {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 200px;
  background: pink;
  border-radius: 12px 12px 0 0;
  text-align: center;
  padding: 5px 12px;
  transform-origin: center bottom;
}

.back-enter-from, .back-leave-to {
  transform: translate3d(0, 100%, 0);
}
.back-enter, .back-leave {
  transform: translate3d(0, 0, 0);
}

.back-enter-active, .back-leave-active {
  transition: all 0.3s;
}
</style>
复制代码

Vue3动画

vue2和vue3动画class的变化，v-enter变成v-enter-from，v-leave编程v-leave-from。

在vue2中class包含：

v-enter v-enter-active v-enter-to 
v-leave v-leave-active v-leave-to
复制代码

在vue3中class包含：

v-enter-from v-enter-active v-enter-to 
v-leave-from v-leave-active v-leave-to
复制代码

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

<Transition type="animation">...</Transition>
复制代码