Vue hooks

transition에 name 속성과 css를 통한 방법 이외에 Javascript로 animation을 제어할 수 있다.

Udmey: Complete Vue Mastery 2022

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      :css="false"
  >
    <h2 v-if="flag">Hey</h2>
  </transition>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: true,
    }
  },
  methods: {
    beforeEnter(el) {
      console.log("before enter event fired", el);
    },
    enter(el, done) {
      console.log("enter event fired", el);
      const animation = el.animate([{transform: "scale3d(0, 0, 0)"}, {transform: "scale3d(1, 1, 1)"}], {duration: 1000});
      animation.onfinish = () => {
        done();
      }
    },
    afterEnter(el) {
      console.log("after enter event fired", el);
    },
    beforeLeave(el) {
      console.log("before leave event fired", el);
    },
    leave(el, done) {
      console.log("leave event fired", el);
      const animation = el.animate([{transform: "scale3d(1, 1, 1)"}, {transform: "scale3d(0, 0, 0)"}], {duration: 1000});
      animation.onfinish = () => {
        done();
      }
    },
    afterLeave(el) {
      console.log("after leave event fired", el);
    }
  }
}
</script>

 

각각의 함수는 해당 element를 알려주는 인자를 공통적으로 가지고 있다.

그리고, enter와 leave는 끝을 알려주는 두 번째 인자를 갖는다.

또한, Vue는 js 전에 css가 있으면 css를 우선시하기 때문에, js로 구현할 경우 transition 속성에 :css="false"를 넣는 것을 추천한다.

 

JS를 통해서 animation을 구현할 때는 해당 resource를 사용한다.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

Using the Web Animations API - Web APIs | MDN