javascript - How to slide-transition two components in Vue.js - Stack Overflow

admin管理员组

文章数量:1428671

I'm trying to create a Vue.js transition where one ponent slides in as the other one slides out. I currently have the new ponent ponent sliding in the way I want, but I've been unable to get the old ponent to slide out.

The transition effect I'm going for is similar to the one here at 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>

I'm trying to create a Vue.js transition where one ponent slides in as the other one slides out. I currently have the new ponent ponent sliding in the way I want, but I've been unable to get the old ponent to slide out.

The transition effect I'm going for is similar to the one here at 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>

• javascript
• css
• vue.js
• css-transitions

Share Improve this question Follow asked Jul 3, 2019 at 16:05 jamesctuckerjamesctucker 4311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This is more of a css animation question than vue.js, but I hope this example is help to you. On JSFiddle . For more information check the official vue translations documentation

template

<link href="https://cdn.jsdelivr/npm/[email protected]" rel="stylesheet" type="text/css">
<div id="transition-ponents-demo">

<p>A <input name="ponent" type="radio" value="v-a" v-model="view"></p>
<p>B <input name="ponent" type="radio" value="v-b" v-model="view"></p>

<transition 
    name="slide"
>
  <ponent v-bind:is="view"></ponent>
</transition>

</div>

vue code

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

css animation

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

本文标签： javascriptHow to slidetransition two components in VuejsStack Overflow