vue3 사라지고 나올때 트렌지션 효과

https://vuejs.org/guide/built-ins/transition.html

Vue.js

 

v-enter-from  => 앞에 이름을 마음대로 지정해서 showDown-enter-from 이런식으로 변경해서 사용

<Transition> 에 name없을때는 기본인 v-enter-from없을때는 기본 클래스

<template>
  <Transition name="showDown">
    <div v-if="show" class="alert alert-success" role="alert">{{ message }}</div>
  </Transition>
</template>
 
 
<style>
/* 안보일때 */
.showDown-enter-from,
.showDown-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
 
/* 버튼 눌렀을때 */
.showDown-enter-active,
.showDown-leave-active {
  transition: all 0.3s ease;
}
 
/* 나타나기 */
.showDown-enter-to,
.showDown-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>