[英]How to slide-transition two components in Vue.js
我正在尝试创建一个 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>
这比 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>
代码
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.