Vue学习—深入剖析复用过渡

一、深入剖析复用过渡

过渡可以通过 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作用域。