El componente Slider Vue que utiliza Transiciones no puede obtener el comportamiento correcto
Estoy intentando crear un componente Vue simple que intercambie dos elementos deslizando uno hacia la izquierda y simultáneamente deslizando el segundo desde la derecha para reemplazarlo. Y luego viceversa cuando se activa nuevamente.
Puedo hacer que el contenido se deslice hacia afuera, pero no parece deslizarse hacia adentro, simplemente aparece.
Además, durante la transición, ambos elementos son visibles, lo que expande el elemento principal, y estoy luchando para que se deslicen uno al lado del otro.
Intenté usar el posicionamiento absoluto para los elementos, pero el elemento principal obviamente pierde su altura y no quiero codificar un valor de altura si es posible.
<script setup>
import { ref } from 'vue';
const isActivated = ref(false)
</script>
<template>
<div class="p-2 relative overflow-hidden">
<Transition name="slide-left">
<div v-show="!isActivated" class="w-full">
<slot name="first-content" />
</div>
</Transition>
<Transition name="slide-right">
<div v-show="isActivated" class="w-full absolute top-0 left-0">
<slot name="second-content" />
</div>
</Transition>
<div @click.prevent.stop="isActivated = !isActivated" class="px-2 absolute top-0 right-2" >
<slot name="trigger" />
</div>
</div>
</template>
<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active{
transition: all .8s;
}
.slide-left-enter-from,
.slide-left-leave-to{
transform: translateX(-100%);
opacity:0;
}
.slide-left-enter-to,
.slide-left-leave-from{
transform: translateX(0%);
opacity:100
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translateX(100%);
opacity:0;
}
.slide-right-enter-to,
.slide-right-leave-from {
transform: translateX(0%);
opacity:100;
}
</style>
También intenté replicar en un bolígrafo: https://codepen.io/Ben-Wrigley/pen/xxBmPrd
Está utilizando nombres de clases de transición de Vue 3; en Vue 2, las fromclases de transición no tienen un -fromsufijo (consulte la documentación ). Entonces tiene que ser .slide-left-enteren lugar de .slide-left-enter-fromy de manera similar para slide-right. Arregle las clases para que las transiciones de entrada funcionen.
Una solución fácil para el efecto de pila durante la transición es colocar uno de los elementos en posición absoluta durante la transición:
.slide-left-leave-active,
.slide-left-enter-active{
position: absolute;
}
Aquí está en un fragmento:
Mostrar fragmento de código
