<!-- 内容 -->
<template>
<transition :name="activeName === '未开始' ? 'slide-left' : 'slide-right'">
<keep-alive>
<component :is="componentId" @showQrCode="showQrCode"></component>
</keep-alive>
</transition>
</template>
```js
<style>
/*向左滑动*/
@keyframes slideInLeft {
from {
transform: translate(100%, 0);
position: fixed;
}
to {
transform: translate(0, 0);
position: fixed;
}
}
@keyframes slideInRight {
from {
transform: translate(0%, 0);
position: fixed;
}
to {
transform: translate(-100%, 0);
position: fixed;
}
}
.slide-left-enter-active {
width: 100vw;
height: 100vh;
animation: slideInLeft 0.3s ease;
}
.slide-left-leave-active {
width: 100vw;
height: 100vh;
animation: slideInRight 0.3s ease;
}
/*向右滑动*/
@keyframes slideOutLeft {
from {
transform: translate(-100%, 0);
position: fixed;
}
to {
transform: translate(0%, 0);
position: fixed;
}
}
@keyframes slideOutRight {
from {
transform: translate(0%, 0);
position: fixed;
}
to {
transform: translate(100%, 0);
position: fixed;
}
}
.slide-right-enter-active {
width: 100vw;
height: 100vh;
animation: slideOutLeft 0.3s ease;
}
.slide-right-leave-active {
width: 100vw;
height: 100vh;
animation: slideOutRight 0.3s ease;
}
</style>
