<div>
<transition name="fade"
@enter="handleEnter"
@before-enter="handleBeforeEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
methods: {
handleClick: function() {
this.show = !this.show
},
handleBeforeEnter: function(el) {
el.style.color = 'red'
},
handleEnter: function(el, done) {
setTimeout(()=> {
el.style.color= "yellow"
done()
}, 2000)
},
handleAfterEnter: function(el){
el.style.color = 'black'
}
}
Vue 中多个元素或组件的过渡
<style>
v.enter, v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<div>
// 如果transition不设置name,默认是v。
<transition name="fade" mode="out-in">
<div v-if"show">Hello World</div>
<div v-else="show">Bye World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
},
}
----------------动态组件------------
<div>
// 如果transition不设置name,默认是v。
<transition name="fade" mode="out-in">
<component :is='type'>Hello World</component>
</transition>
<button @click="handleClick">toggle</button>
</div>
Vue.component('child', {
template: '<div>child</div>'
})
Vue.component('child-one', {
template: '<div>child-one</div>'
})
var vm = new Vue({
el:'#root',
data: {
type: 'child'
},
methods: {
handleClick: function(){
this.type = this.type==='child'? 'child-one' : 'child'
}
}
})
列表过渡动画。transition-group
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<div>
// 如果transition不设置name,默认是v。
<transition-group>
<div v-for="item of list" :key="item.id">
{item.title}
</div>
</transition-group>
<button @click="handleAddClick">Add Item</button>
</div>
动画的封装
<fade :show='show'>
<div>hello world<div>
</fade>
<fade :show='show'>
<h1>hello world<h1>
</fade>
<script>
Vue.component('fade', {
props:['show'],
template: `
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
>
<slot v-if="show"><slot>
</transition>
`,
methods: {
handleBeforeEnter: function(el) {
el.style.color='red';
},
handleEnter: function(el, done) {
setTimeout(()=> {
el.style.color = 'green'
done()
}, 2000)
}
}
})
</script>