Layout transition
In my app.vue
i have nuxtpage inside layout tags
in my layout page i have basic html with slot tag
and i called layout "auth"
how can i make my indexes to slide animation
for example i did this but didn't worked
<template>
<div class="screen-container">
<div class="left-container">
<div class="logo-container">
<img
src="@/assets/images/logo.png"
alt="logo"
width="230"
/>
<LoginLangSwitcher />
</div>
<Transition>
<slot />
</Transition>
</div>
<div class="right-container">
<video
class="w-full h-full object-cover"
loop
muted
playsinline
autoplay
>
<source
src="@/assets/video/login_video.mp4"
type="video/mp4"
/>
</video>
</div>
</div>
</template>
<style scoped>
.screen-container {
@apply w-screen h-screen flex
}
.right-container {
@apply hidden md:flex w-full
}
.left-container {
@apply p-10 md:p-16 flex flex-col flex-shrink-0 gap-14 w-full md:w-[600px] dark:bg-zinc-900 bg-white;
}
.logo-container {
@apply flex justify-between items-start
}
.v-enter-active,
.v-leave-active {
transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
<template>
<div class="screen-container">
<div class="left-container">
<div class="logo-container">
<img
src="@/assets/images/logo.png"
alt="logo"
width="230"
/>
<LoginLangSwitcher />
</div>
<Transition>
<slot />
</Transition>
</div>
<div class="right-container">
<video
class="w-full h-full object-cover"
loop
muted
playsinline
autoplay
>
<source
src="@/assets/video/login_video.mp4"
type="video/mp4"
/>
</video>
</div>
</div>
</template>
<style scoped>
.screen-container {
@apply w-screen h-screen flex
}
.right-container {
@apply hidden md:flex w-full
}
.left-container {
@apply p-10 md:p-16 flex flex-col flex-shrink-0 gap-14 w-full md:w-[600px] dark:bg-zinc-900 bg-white;
}
.logo-container {
@apply flex justify-between items-start
}
.v-enter-active,
.v-leave-active {
transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
0 Replies