2017-12-21 20 views
0

내 페이지는 정적 HTML + JQuery가 혼합되어 있으며 일부는 Vue.js로 작성되었습니다.Vue.js - 구성 요소를 업데이트하기 전에 애니메이션이 완료 될 때까지 기다립니다.

반응성 저장소의 배열을 관찰하고 배열의 길이를 보여주는 간단한 Vue 카운터 구성 요소가 있습니다.

또한 저장소 배열에 무언가를 추가하는 버튼이 있습니다. 현재 버튼을 클릭하면 카운터가 즉시 새로 고침됩니다.

버튼을 클릭 할 때 약 1 초 동안 실행되는 애니메이션 (아마도 JQuery 사용)을 구현하고 싶습니다. 그리고 애니메이션이 끝날 때까지 카운터 새로 고침을 지연시키고 싶습니다. 그러나 배열에 대한 삽입을 지연시킬 수는 없습니다. 다른 Vue 구성 요소에서도이를 관찰하고 즉시 업데이트하려고하기 때문에 배열에 대한 삽입을 지연시킬 수 없습니다. 또한 배열에서 제거하는 다른 단추가 있고 카운터에서 즉시 감소가 적용되기를 원합니다.

Vue.je를 사용하여 구현하는 방법을 제안 할 수 있습니까?

답변

1

카운터가 관찰하는 섀도우 배열을 만듭니다. watch 소스 배열을 사용하고 setTimeout을 사용하여 지연 후 섀도우 배열에 복사합니다.

+0

내가 편집 한 질문을 잊었습니다. 감소 단추가 있으며 즉시 감소가 적용되기를 원합니다. 하지만 플래그를 검사하고 즉시 또는 지연으로 복사할지 여부를 결정하는 감시자를 가질 수는 있습니다. 그런 다음 애니메이션이 시작될 때만 플래그를 설정할 수 있습니다. 그것은 당신이 제안하는 것입니까? –

+0

그럴만한 소리입니다. –

+0

마지막 질문 하나, 국기는 어디에 있어야합니까? 나는 단순한 세계를 피하고 싶다. 카운터에 살 수 있지만 단추는 직접 카운터를 참조해야하므로 커뮤니티에서 권장하지 않습니다. –