深入剖析复用过渡
一、深入剖析复用过渡
过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将 <transition>
或者 <transition-group>
作为根组件,然后将任何子组件放置在其中就可以了。
<template>
<div id="app">
<button @click="show = !show">click</button>
<base-level >
<div key="world" v-if="show">hello shanshan</div>
<div key="shanshan" v-else>hello world</div>
</base-level>
</div>
</template>
<script>
import BaseLevel from './components/BaseLevel1';
export default {
name: 'App',
components: {
BaseLevel
},
data () {
return {
show: true,
}
}
}
</script>
<script>
export default {
functional: true,
render (h, context) {
const {
slots } = context;
return (
<transition name="single">
{
slots().default }
</transition>
)
},
}
</script>
<style>
.single-enter,
.single-leave-to {
opacity: 0;
}
.single-enter-active,
.single-leave-active {
transition: all .3s;
}
.single-enter-to,
.single-leave {
opacity: 1;
}
</style>
注意:当使用函数式组件复用过渡时,不要设置css作用域。