탈퇴 전환이 활성화되어 있는 동안 구성 요소 렌더링 계속

탈퇴 전환이 활성화되어 있는 동안 구성 요소 렌더링 계속

값이 끊임없이 변화하는 컴포넌트가 있습니다.단, 전환으로 숨겨지면 값 갱신이 정지되어 버립니다.이것은 제가 원하는 동작이 아닙니다.

이 바이올린이나 단편들을 확인해 보세요.

var demo = new Vue({
  el: '#demo',
  data: {
    visible: true,
    counter: 0
  },
  created: function() {
    setInterval(function() {
      this.counter++;
    }.bind(this), 200);
  }
});

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: 2s ease;
}

[v-cloak] {
  display: none;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo" v-cloak>
  <p>Value: {{ counter }}</p>

  <transition name="fade">
    <p v-if="visible">Transition: {{ counter }}</p>
  </transition>

  <button @click="visible = !visible">
    Transition!
  </button>
</div>

보시는 바와 같이 버튼을 클릭하면 페이딩 단락은 현재 카운터 값으로 동결되고 다른 단락은 계속 업데이트됩니다.어떻게 하면 피할 수 있을까요?페이딩 단락이 완전히 숨겨지고 전환이 완료된 경우에만 값 업데이트를 중지합니다.

@Sandwell의 답변과 @Nope의 코멘트를 보완하기 위해

전환이 완료된 후 요소를 제거할 수 있습니다.

http://jsfiddle.net/jacobgoh101/5vu7wgj8/4/

<p v-show="visible" v-if="exists" @transitionend="handleTransitionend">

그리고.

new Vue({
    data: {
        // ...
        exists: true
    },
    methods: {
        handleTransitionend() {
            this.exists = false;
      }
    }
});

---

갱신:

@HristiyanDodov는 @Sandwell과 나의 제안 위에 트랜지션 훅을 사용하여 완전한 솔루션을 구축했다. @before-enter그리고.@after-leave.

완전한 솔루션은 다음과 같습니다. http://jsfiddle.net/hdodov/5vu7wgj8/6/

그래서 멈춰요.v-if를 트리거합니다.destroy이벤트 때문에 컴포넌트가 존재하지 않으며 더 이상 바인딩할 수 없습니다.

사용하다v-show대신v-if

개념 실증

언급URL : https://stackoverflow.com/questions/50130354/continue-to-render-component-while-leave-transition-is-active