Merhabalar arkadaşlar. Çok araştırdım ama bir sonuca varamadım. laravel 8 vue ile bir proje yapacağım. kodlarım şu şekilde
<template>
<transition
name="fade"
mode="out-in"
appear>
<div>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div>
<Link href="/">
<BreezeApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
</Link>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
<slot />
</div>
</div>
</div>
</transition>
</template>
<script>
import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue'
import { Link } from '@inertiajs/inertia-vue3';
export default {
components: {
BreezeApplicationLogo,
Link
},
data(){
return{
};
}
}
</script>
<style>
.fade-enter-from,
.fade-leave-to
{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active
{
transition: opacity 1s ease-out;
}
</style>
Arkadaşlar yukardaki kodlar laravel breeze in oluşturduğu kodlar. Ben sadece transition ekledim. <slot /> kısmı login ve register componentleri geliyor.
Benim istediğim linklere tıklayınca fade animasyonuyla gelsin. Ama olmuyor. F5 e bastığımda oluyor. linklerden ilerleyince transition çalışmıyor. direk geçiyor. Bunu nasıl yaparız. Yardımlarınızı bekliyorum. Teşekkürler