Vue 组件间实行 transition效果切换的问题?

Question

请问能使用Vue transition 进行组件之间切换的动画效果吗??

https://jsfiddle.net/xiuxiubo...

Answer 1

自己参照vue官网的多组件过渡效果
https://cn.vuejs.org/v2/guide...

Answer 2

你这样的写法没试过，也不知道有没有用，下面这个是在官网的写法上补全了点击事件

<button type="button" @click="changeComponent('v-a')">Component A</button>
<button type="button" @click="changeComponent('v-b')">Component B</button>
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
<script>
    new Vue({
      el: '#transition-components-demo',
      data: {
        view: 'v-a'
      },
      components: {
        'v-a': {
          template: '<div>Component A</div>'
        },
        'v-b': {
          template: '<div>Component B</div>'
        }
      },
      methods: {
          changeComponent (component) {
              this.view = component;
          }
      }
    })
</script>
<style>
    .component-fade-enter-active, .component-fade-leave-active {
      transition: opacity .3s ease;
    }
    .component-fade-enter, .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */ {
      opacity: 0;
    }
</style>