關(guān)于vue狀態(tài)過渡transition不起作用的原因解決

<transition name="fade">
 過渡的元素...
</transition>

<transition name="fade">
 <div v-if="show">
 <div class="item-box"></div>
 </div>
 <div v-else>
 <span>暫無更多</span>
 </div>
</transition>

<transition name="fade">
 <div v-if="show" key="box1">
 <div class="item-box"></div>
 </div>
 <div v-else key="box2">
 <span>暫無更多</span>
 </div>
</transition>

<transition :name="slide">
 <keep-alive>
 <component 
 :is="questionMap[currentQuestion.type]"
 :key="index"
 :currentQuestion="currentQuestion"
 :index="index">
 </component>
 </keep-alive>
</transition>

<transition :name="slide" mode="out-in">
 <keep-alive>
 <component 
 :is="questionMap[currentQuestion.type]"
 :key="index"
 :currentQuestion="currentQuestion"
 :index="index">
 </component>
 </keep-alive>
</transition>

<div id="list-demo" class="demo">
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list" tag="p">
 <span v-for="item in items" v-bind:key="item" class="list-item">
 {{ item }}
 </span>
 </transition-group>
</div>

new Vue({
 el: '#list-demo',
 data: {
 items: [1,2,3,4,5,6,7,8,9],
 nextNum: 10
 },
 methods: {
 randomIndex: function () {
 return Math.floor(Math.random() * this.items.length)
 },
 add: function () {
 this.items.splice(this.randomIndex(), 0, this.nextNum++)
 },
 remove: function () {
 this.items.splice(this.randomIndex(), 1)
 },
 }
})

.list-item {
 display: inline-block;
 margin-right: 10px;
}
.list-enter-active, .list-leave-active {
 transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}