Vue.js 애니메이션이 올바르게 작동하지 않음

Vue.js 애니메이션이 올바르게 작동하지 않음

나는 Vue 2를 사용하고 있으며 CSS 애니메이션을 자주 생성되고 파괴되는 요소에 포함시키려고 한다.다음은 내 코드의 예다.

  export default {
    name: 'MyElement',
    methods: {
      enterStart: function (el) {
        console.log('about to enter');
        el.classList.add('testing-enter');
      },
      enter: function (el) {
        console.log('entered');
      },
      leaveStart: function (el) {
        console.log('starting to leave!');
      },
      leave: function (el) {
        console.log('leaving!');
      },
    }
  };

.testing-enter {
  animation: enter .2s;
}

.testing-leave {
  animation: leave .2s;
}

@keyframes enter {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

<template>
  <div>
    <transition
      @before-enter="enterStart"
      @enter="enter"
      @leave="leaveStart"
      @leave-active="leave"
      appear
    >
      <div>My element is here!</div>
    </transition>
  </div>
</template>

우선, 내가 포함하지 않는 한, 이 모든 것은 효과가 없다.appear나의<transition ...>원소의이렇게 하면 초기 렌더링 시 전환이 이루어진다는 것을 알지만 요소가 생성되거나 파괴될 때마다 전환이 이루어지길 바란다.

다음, 내 콘솔에서.내가 볼 수 있다.enterStart그리고enter둘 다 달렸지만leaveStart그리고leave원소가 파괴되어도 절대 뛰지 않는다.내가 뭘 잘못하고 있는 거지?

전환 내부의 요소에는 상태(표시 또는 숨기기)가 필요하다.또한 당신의 전환은 CSS에서 많은 전환이 필요하며, 그것은 다음과 같이 명명되어야 한다.

name="transitionName"

예:

new Vue({
  el: "#app",
  data: function() {
    return {
      showThisElement: false
    }
  },
  methods: {
    toggleShow: function() {
      this.showThisElement = !this.showThisElement
    }
  }
});

    .testing-enter-active {
      animation: enter .2s;
    }

    .testing-leave-active {
      animation: leave .2s;
    }

    @keyframes enter {
      0% {
        opacity: 0;
        transform: scale(0);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes leave {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0);
      }
    }

   <div id="app">
  
  <div @click="toggleShow">Show/Hide</div>
  
  <transition 
    name="testing">

    <div v-if="showThisElement">My element is here!</div>

  </transition>
</div>

코드펜에서 '표시/숨기기'를 클릭하여 전환을 전환하십시오.

http://codepen.io/anon/pen/WpZPJp

문제 해결!

그래서 나는 그것을 꺼냈다.transition개별 구성 요소에서 생성되어transition-group대신 컨테이너 구성요소를 렌더링한 컨테이너 구성요소 주위에 배치한다.

그리고 나서, 조금 더 읽고 나서 나는 내가 그 책을 추가하고 싶어한다는 것을 깨달았다.mode="out-in"내 앞으로 나아가다transition-group새 구성요소가 렌더링되기 전에 왼쪽 구성요소가 완전히 애니메이션화되도록 한다.

나는 또한 애니메이션이 일어나기로 되어 있을 때, Vue가 어떤 클래스를 추가했는지 보기 위해 HTML을 보았다.부에가 덧붙인 것 같다.v-enter-active, v-enter-to,그리고v-leave-to이름을 사용자 지정하는 대신, 나는 단지 그 수업들을 고수했고 스타일링에 내 애니메이션을 추가했다.

만약 다른 누군가가 비슷한 효과를 원하면 스트레스 수준을 조금 낮출 수 있을 텐데...

참조URL: https://stackoverflow.com/questions/42821178/vue-js-animations-not-working-correctly