애니메이션이 완료되기 전에 Vue.js 전환 클래스가 사라졌습니다.

Question

자바 스크립트 훅을 사용하여 velocity.js를 호출하고 내 구성 요소에 애니메이션을 적용하는 Vue 구성 요소를 생성했습니다. 구성 요소의 slideDown

https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw

잘 작동합니다. 그러나 v-on:leave이 실행될 때. 디스플레이 CSS 속성이 display: none으로 바로 설정되어 있으므로 내 slideUp 애니메이션이 표시되지 않습니다.

전이 애니메이션 기간을 알 수 없기 때문에 이런 경우가 발생합니다. 따라서 디스플레이 none과 block 사이를 단순히 전환하기 만하면됩니다.

그래도 문제를 해결할 수 있습니까?

감사합니다.

Answer 1

AccordionItem.vue에서 전환에 CSS를 사용하지 않으므로 Vue에서 콜백을 수락하고 전환 완료시 벨로 시티에 알려야합니다.

간단히 :

leave(e, done) { 
    Velocity(e, 'slideUp', { duration: 250, complete: done }); 
} 

당신은 그것을 here

뷰의 문서의이 section 작업 볼 수있는 것은 설명 :

자바 스크립트 전용 전환을 사용하여 done 콜백이 필요합니다 enter 및 leave 후크 그렇지 않으면 동기식으로 호출되며 전환이 즉시 완료됩니다.