如何在vue.js中滑动两个组件

Question

我正在尝试创建一个vue.js的过渡，其中一个组件滑入另一个分量时滑出。目前，我的新组件组件以自己想要的方式滑动，但是我一直无法使旧组件滑出。

我要追求的过渡效应类似于这里的takecareof。

    <transition name="slide-fade">
      <reservation-step step="1" :showBack="false">
        <space-selection/>
      </reservation-step>
    </transition>
    <transition name="slide-fade">
      <reservation-step step="2">
        <reservation-type/>
      </reservation-step>
    </transition>
    <transition name="slide-fade">
      <reservation-step step="3">
        <date-selection/>
      </reservation-step>
    </transition>

<style lang='scss'>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 1s 0.2s;
}
.slide-fade-enter, .slide-fade-leave-active
/* .slide-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.slide-fade-enter {
  transform: translateX(100px);
}
.slide-fade-leave-active {
  transform: translateX(-100px);
}
</style>

Answer 1

这比vue.js更像是CSS动画问题，但我希望此示例对您有所帮助。在JSFIDDLE上。有关更多信息，请查看官方VUE翻译文档

模板

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="transition-components-demo">
<p>A <input name="component" type="radio" value="v-a" v-model="view"></p>
<p>B <input name="component" type="radio" value="v-b" v-model="view"></p>
<transition 
    name="slide"
>
  <component v-bind:is="view"></component>
</transition>
</div>

vue代码

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a',
  },
  components: {
    'v-a': {
      template: '<div>Компонент А</div>'
    },
    'v-b': {
      template: '<div>Компонент Б</div>'
    }
  }
})

CSS动画

.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}