Vue 전환 : v-on : 콜백이 실행되기 전에 before-leave hides 요소가 실행됩니다.

Question

Vue를 배우므로 매우 혼란 스럽습니다.

jQuery의 slideToggle()을 복제하려고합니다.

여기에는 제목과 본문이있는 항목 목록이 있습니다.

처음에는 각 목록 항목의 본문이 숨겨져 있으며 사용자가 제목을 클릭하면 슬라이드 전환을 수행해야합니다.

각 목록 항목의 본문이 가변 높이이므로 CSS에서 height: auto의 전환을 올바르게 수행 할 수 없으므로 JS에서이 작업을 수행해야합니다. (심지어 max-height. 부드러운에서 멀리 그래서

나는 Velocity.js 라이브러리를 사용하고 있으며, slideDown는 완벽하다. (나는 생각하기 때문에 실행할 수 없습니다 slideUp) 뷰가 이미 요소가 숨겨져있다. 여기

제 (간체) 서식 :.

<ul class="list-group"> 
    <li class="list-group-item" v-for="word in saved_definitions"> 
     <h3 @click="word.show = !word.show"> 
      {{ word.word }} 
     </h3> 
     <transition v-on:before-enter="slide_down" v-on:before-leave="slide_up" :css="false"> 
      <div v-show="word.show"> 
       {{ word.definition }} 
      </div> 
     </transition> 
    </li> 
</ul> 

saved_definitions가 {word: '', definition: '', show: true} 오브젝트의 배열 여기

는 관련된 방법이다 :

slide_down: function(el) { 
    Velocity(el, 'slideDown', 'fast'); 
}, 

slide_up: function(el) { 
    console.log(el); 
    Velocity(el, 'slideUp', 'fast'); 
} 

slide_down()은 완벽하게 작동합니다.

slide_up()이 작동하지 않으면 정의가 변경되지 않고 사라집니다. console.log()은 Velocity가 slideUp을 수행하기 전에 요소에 display: none이 있음을 보여줍니다.

jsFiddle 여기에 있습니다 : https://jsfiddle.net/zmoc2v3n/ - 당신은 slideDown이 부드럽고 slideUp이 작동하지 않는 것을 볼 수 있습니다.

leave과 after-leave 후크를 사용해 보았는데 도움이되지 않습니다.

v-if을 사용하면 요소가 먼저 렌더링 된 다음 숨겨진 다음 slideDown이 발생합니다. 난 여전히 before-leave 요소를 즉시 숨기는 동일한 문제가 있습니다.

미리 도움 주셔서 감사합니다.

Answer 1

나는이 질문을 Vue Forum에 물었고 여기에 답변을 게시 할 것이라고 생각했습니다.

enter 및 leave 이벤트를 사용해보십시오. Vue가 애니메이션 완료 시점을 알 수 있도록합니다. JS에서

<transition @enter="slide_down" @leave="slide_up"></transition> 

:

function slide_down(el, done) { 
    Velocity(el, 'slideDown', { 
     duration: 'fast', 
     complete: done 
    }) 
} 

function slide_up(el, done) { 
    Velocity(el, 'slideUp', { 
     duration: 'fast', 
     complete: done 
    }) 
} 

내 문제가 뷰에 비해 속도로 더 많은했다 밝혀졌습니다.

Here is the working jsfiddle.