VueJ에서 원활하게 v-show 애니메이션 생성s

VueJ에서 원활하게 v-show 애니메이션 생성s

나는 Vuejs에서 트랜지션을 사용하여 두 개의 디바를 애니메이션화하려고 했다.다음은 제가 사용한 코드(jsfiddle)입니다.근데 왜 안 되는지 모르겠어

https://jsfiddle.net/k6grqLh1/16/

표시하다

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-show="show">
        <div class="box yellow"></div>
      </div>
     </transition>
     <transition name="fade">
      <div v-show="!show">
        <div class="box blue"></div>
      </div>
      </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

.box {
  width:200px;height:200px;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}

js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true
  }
});

바이올린에 vue 2.x를 추가하는 것 외에 각 div에 키를 추가해야 합니다.다음 사항을 변경해야 합니다.

왜 docs에서?

태그 이름이 동일한 요소 간에 전환할 때는 고유한 키 속성을 지정하여 Vue에 개별 요소임을 알려야 합니다.그렇지 않으면 Vue 컴파일러는 효율화를 위해 요소의 내용만 대체합니다.기술적으로 불필요한 경우에도 컴포넌트 내에서 항상 여러 항목을 핵심으로 하는 것이 좋습니다.

HTML

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

작업중 : https://jsfiddle.net/k6grqLh1/21/

편집필

보다 부드럽게 하기 위해 Transition-Modes를 사용할 수 있습니다.mode="out-in"그러면 현재 요소가 먼저 전환되고 완료되면 새 요소가 전환됩니다. 아래 코드를 참조하십시오.

<transition name="fade" mode="out-in">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

바이올린: https://jsfiddle.net/k6grqLh1/22/

일단은...Vue 1을 Import하고 있습니다.Vue 2를 Import하면 이 html이 동작합니다.

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

요소 간의 이행이 어떻게 처리되는지 알아보려면 https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements 문서를 읽어보십시오.

언급URL : https://stackoverflow.com/questions/42019828/smoothly-animate-v-show-in-vuejs