“This is the 14th day of my participation in the First Challenge 2022.

In fact, we often write some animations during business iterations. If you need to write these animations by hand, you may encounter some difficulties, so here are some commonly used animations, so that you can use them directly when you need them later.

Animation 1

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

defineProps({
  msg: String
})

const state = reactive({show: false})

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

<template>
  <button @click="handleClick">Show/Hide</button>
  <div>hello</div>
  <transition name="back">
    <div class="animate" v-if="state.show">Welcome back</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.3 s;
}
.back-leave-active {
  animation: zoom-leave 0.3 s;
}
</style>
Copy the code

Animation 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">Show/Hide</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">Welcome back</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.3 s;
  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.3 s;
}
.slide-fade-enter-from {
  width: 0;
}
.slide-fade-enter-to {
  width: 88px;
}
</style>

Copy the code

Animation 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">Show/Hide</button>
  <div>hello</div>
  <transition name="back">
    <div class="animate" v-if="state.show">Welcome back</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.3 s;
}
</style>
Copy the code

Vue3 animation

Vue2 and vue3 animation class changes, v-enter becomes V-enter-from, V-leave programming v-leave-from.

In VUe2 class contains:

v-enter v-enter-active v-enter-to 
v-leave v-leave-active v-leave-to
Copy the code

In VUe3 class contains:

v-enter-from v-enter-active v-enter-to 
v-leave-from v-leave-active v-leave-to
Copy the code

Use both transitions and animations

In order for Vue to know that the transition is complete, it must set up the appropriate event listener. It can be transitionEnd or AnimationEnd, depending on the CSS rules applied to the element. If you use any of these, Vue automatically recognizes the type and sets up a listener.

However, in some scenarios, you may need to have two transition effects for the same element at the same time. For example, the animation is triggered quickly and completed, and the transition effect is not finished. In this case, you need to use the Type attribute and set the animation or transition to explicitly declare the type you want Vue to listen to.

<Transition type="animation">... </Transition>Copy the code