トランジションの状態が終了しても、トランジションの状態が維持されないのはなぜですか？

Question

私は少しbasic example for transitionsを拡張し、要素1 divにフェードアウトすると同時に、他の上での退色を持っていると思った：

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    show: true 
 
    } 
 
})

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="demo"> 
 
    <button v-on:click="show = !show"> 
 
    Toggle 
 
    </button> 
 
    <transition name="fade"> 
 
    <p v-show="show">hello</p> 
 
    </transition> 
 
    <transition name="fade"> 
 
    <p v-show="!show">hello</p> 
 
    </transition> 
 
</div>

意図したとおりしかしこれは動作しません。上のhelloはフェードアウトし、下のものはフェードインします（これまでOK）が、下のものは消え、上のものが表示されます（直ちに、状態が変化して遷移がないようになります）。

ボタンをもう一度クリックすると、トランジションが正しく行われているように見えます（これは、下のhelloがフェードアウトし、上のものがフェードインすることから始まります）。

CSSは対称です。ボタンを押したときだけ状態が変わるので、最初のトランジション後にスイッチがすぐにわからないのですか？ the documentationて説明したよう

Answer 1

v-showは設定によってdisplay CSSプロパティ要素を隠し：

v-showは、単に要素のdisplay CSSプロパティを切り替えます。

これは、遷移が完了した後、つまりdisplayプロパティが設定されているときに要素が消えるという効果があります。 display: noneの要素は、その要素が占有するスペースを全く使わずに完全に隠されています。

要素を非表示にすると、トランジションが終了すると表示プロパティが設定されますが、要素を再び表示すると、トランジション開始時に設定する必要があります（そうしないとトランジションが不可視になります） ）。

位置を変更しないようにするには、計算されたレイアウトの要素を常に維持する必要があります。したがって、display: noneを非表示にすることはできませんが、別の方法を使用する必要があります。これはまた、v-showを使用することができないことを意味します。それだけでトップまでジャンプし、第1の要素の - 2番目の1が消えない

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    show: true 
 
    } 
 
})

.fading-element { 
 
    transition: opacity 2s; 
 
} 
 
.invisible { 
 
    opacity: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="demo"> 
 
    <button v-on:click="show = !show">Toggle</button> 
 
    <p :class="['fading-element', { 'invisible': !show }]">hello</p> 
 
    <p :class="['fading-element', { 'invisible': show }]">hello</p> 
 
</div>