</button>
</transition>
下面是一个例子
<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
<button @click="isEditing = !isEditing">toggle</button>
<transition name="fade">
<p v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
isEditing:true
},
})
</script>使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡
<transition>
<button v-if="docState === 'saved'" key="saved">Edit</button>
<button v-if="docState === 'edited'" key="edited">Save</button>
<button v-if="docState === 'editing'" key="editing">Cancel</button>
</transition>可以重写为
<transition>
<button v-bind:key="docState">{{ buttonMessage }}</button>
</transition>
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}下面是一个例子
<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
<button @click="change">change</button>
<transition name="fade">
<p v-bind:key="docState">{{ message }}</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
index:0,
isEditing:true,
arr:['saved','edited','editing'] },
computed: {
docState(){
return this.arr[this.index];
},
message() {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
</script>过渡模式
先看下面这个例子
<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div id="demo">
<transition name="fade">
<button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
</transition>
</div>
<script>
