【Vue.js】JavaScript로 트랜지션 구현

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다.
제대로 기억하지 않으면 우선 그런 것을 비망록으로 1개 1개 남겨 둔다.

자바스크립트에서 전환 구현

자바스크립트에서의 트랜지션의 기본형

JavaScript에서의 트랜지션 애니메이션은 다음과 같이 8개의 JavaScript 후크 함수를 선언하는 것으로 구현할 수 있다(beforeEnter, enter, ... 각각은 methods: {} 내에 각각 정의한다).

<transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
  <div class="circle" v-if="show"></div>
</transition>

자세한 내용은 다음 커밋을 참조하십시오.

실제로 JavaScript로 전환을 구현합니다.

동영상의 소스 코드는 이하.

App.vue

<template>
  <div class="main">
    <!-- 省略 -->
    <button type="button" class="btn btn-primary me-1" @click="show = !show">
      切り替え
    </button>
    <br /><br />
    <transition
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div class="circle" v-if="show"></div>
    </transition>
    <!-- 省略 -->
  </div>
</template>

<script>
// 省略

export default {
// 省略
  methods: {
    beforeEnter(el) {
      // 現れる前
      el.style.transform = "scale(0)";
    },
    enter(el, done) {
      let scale = 0;
      const interval = setInterval(() => {
        el.style.transform = `scale(${scale})`;
        scale += 0.1;
        if (scale > 1) {
          clearInterval(interval);
          done();
        }
      }, 100);
    },
    leave(el, done) {
      // 消える時（イメージはtransitionのCSSの"-leave-active"の部分）
      let scale = 1;
      const interval = setInterval(() => {
        el.style.transform = `scale(${scale})`;
        scale -= 0.1;
        if (scale < 0) {
          clearInterval(interval);
          done();
        }
      }, 100);
    },
  },
};
</script>

<style scoped>
/* 省略 */

.circle {
  width: 200px;
  height: 200px;
  margin: auto;
  border-radius: 100px;
  background-color: deeppink;
}
</style>

:css="false" JavaScript의 애니메이션만을 유효하게 할 때는, css 속성에 false를 bind 하는 것으로 다음의 이점이 나온다

의도하지 않은 애니메이션의 움직임이 되지 않게 한다(name 속성이 미정도라도 v-enter, ...는 암묵적으로 존재하기 때문에)

CSS의 트랜지션 애니메이션의 처리를 스킵 할 수 있으므로 성능을 향상시킵니다.

※주의로서, v-bind:css 로 false 를 바인딩 하고 있어 false는 boolean형(문자열이 아니다).

done() 애니메이션이 끝난 것을 Vue.js에 전달하는 함수 위의 예에서는 반복적 인 비동기로 전환 애니메이션을 이동하고 완료했음을 알리는 역할을합니다.

소스 코드 전체는 이하.

CSS 트랜지션과 JavaScript 트랜지션을 함께 사용하면 어떻게됩니까?

JavaScript 트랜지션의 enter() 트랜지션의 움직임이 도중에도 중단되어 트랜지션이 완료된다.leave() 메소드가 없는 경우, 양쪽의 트랜지션이 완료할 때까지 움직임이 기능한다.

CSS 트랜지션과 JavaScript 트랜지션을 병용하고 있을 때의 트랜지션 클래스의 적용 ・JavaScript 메소드의 실행이 행해지는 타이밍

enter (요소가 나타날 때)

leave(요소가 사라질 때)

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.

htps : // 코 m / 유타 카타 야마 - 23 / ms / 다베 fb59d16 아 83f1 아 1d4