Vue Transition

우리가 animation 효과를 주기 위해서 CSS로 처리하는 경우가 있다.

하지만, Vue에서는 animation을 transition 기법을 사용하여 처리할 수 있다.

 

Udemy: Complete Vue Mastery 2022

Udemy: Complete Vue Mastery 2022

위에서 볼 수 있듯이, Vue에서는 Transition을 enter과 leave에 대해서 각각 세 단계로 나눈다.

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <transition name="fade">
    <h2 v-if="flag">Hello world!</h2>
  </transition>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: false,
    }
  }
}
</script>

<style>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 0.25s linear;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-active {
  transition: all 0.25s linear;
}

.fade-leave-to {
  opacity: 0;
}
</style>

코드에서 볼 수 있듯이, Transition에 name 속성에 클래스의 이름을 넣고

(transition이 얼마나 걸릴지를 duration 속성에 넣어도 된다.)

style에서 from/active/to를 상황에 맞게 넣으면 된다.

 

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <transition name="fade" mode="out-in">
    <h2 v-if="flag" key="main">Hello world!</h2>
    <h2 v-else key="secondary">Another hello!</h2>
  </transition>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: false,
    }
  }
}
</script>

<style>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 4s linear;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-active {
  transition: all 4s linear;
}

.fade-leave-to {
  opacity: 0;
}
</style>

두 개의 자식에 대해서 할 때는, 구별을 주기 위해서 key값을 넣는다.

또한, transition에 mode 속성을 통하여 out을 먼저 할 것인지, in을 먼저 할 것인지 정할 수 있다.

default: in-out

 

다른 예시

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <transition name="zoom" type="animation" appear>
    <h2 v-if="flag">Hello</h2>
  </transition>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: true,
    }
  }
}
</script>

<style>
h2 {
  width: 400px;
  padding: 20px;
  margin: 20px;
}

.zoom-enter-from {
  opacity: 0;
}

.zoom-enter-active {
  animation: zoom-in 1s linear forwards;
  transition: all 2s linear;
}

.zoom-leave-active {
  animation: zoom-out 1s linear forwards;
  transition: all 2s linear;
}

.zoom-leave-to {
  opacity: 0;
}

@keyframes zoom-in {
  from {
    transform: scale(0, 0);
  }

  to {
    transform: scale(1, 1);
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(0, 0);
  }
}
</style>

<transition>에 type을 넣음으로서  animation 혹은 transition 속성의 시간을 결정하고, appear을 통하여 render가 되자마자 바로 animation이 나타나도록 한다.