vue.js 지연 v-if 전환

vue.js 지연 v-if 전환

A을(를) 지연시키고 싶다.v-if내 요소가 300ms 후에 바로 제거되지 않도록 토글하십시오.DOM에서 요소를 제거해야 하므로v-if.

현재 나는 이것을 완성하기 위한 다소 진부한 해결책을 가지고 있다.나는 내 몸을 감쌌다.v-if전환에 대한 설명과 전환 설정.3s.

나는 여기서 불투명도를 사용하고 있지만 원소를 희미하게 만들고 싶지 않고 단순히 지연시키고 싶어서 아무 것도 하고 있지 않다.v-if토글하다

내 요소:

<transition name="delay-display-none">
    <div class="i-need-to-be-removed-after-300-ms"></div>
</transition>

내 스타일:

.delay-display-none-leave-active {
    transition: opacity .3s
}
.delay-display-none-leave-to {
    opacity: 1
}

이 진부한 해결책 대신에 이것을 완성하는 더 좋은 방법이 있을까?

단순히 지연을 강요하고 싶다면v-if응답 및 이미 사용 중<transition>, 당신은 a를 사용함으로써 지연을 속일 수 있다.transition-delay예를 들어, 기다리려는 기간 중transition-delay: 300ms, 및 설정transition-duration: 0아무것도 희미하게 만들지 않도록 말이야

다른 방법은 실제로 전달되는 변수의 업데이트를 지연시키는 것이다.v-if. 변수가 동적으로 업데이트되므로(그렇지 않으면 v-if를 전환할 수 없음)window.setTimeout(...)지연 효과를 생성할 수 있도록 값을 업데이트하십시오.예를 들어 사용자가 요소를 빠르게 전환할 때마다 동일한 시간 초과를 취소하고 싶기 때문에 이 솔루션에는 약간 더 주의를 기울여야 한다.

참조URL: https://stackoverflow.com/questions/46687790/vue-js-delay-v-if-toggle