Cześć wszystkim ostatnio zrobilem działający slider .chciałbym sie ciebie doradzić
czy moj kod jest zrobiony z godnie z dobrymi praktykami i co by moża było jeszcze dodać i poprawić ?
<template>
<div>
<transition name="fade" mode="out-in" appear>
<h5 v-show="show" :class="animation">{{info[index].title }} </h5>
</transition>
<transition name="fade" mode="out-in" appear>
<h2 v-show="show" :class="animation" > {{ info[index].message }} </h2>
</transition>
<transition name="fade" mode="out-in" appear>
<button v-show="show" :class="animation" @click="changeSlide"> {{ info[index].button }} </button>
</transition>
</div>
</template>
<script>
export default{
name:"single-info",
data(){
return {
show: true,
index: 0,
current: 0,
animation : {
},
info:[
{ title:'Podziel sie', message:'Dołacz do teraz nas', button : 'Dołacz' },
{ title:'Podziel sie', message:'Dołacz do juz nas' , button : 'Dołacz' },
{ title:'Podziel sie', message:'Dołacz do zaraz nas' , button : 'Dołacz'}
]
}
},
methods : {
changeSlide(){
if( this.index >= 3){
this.index = 0;
this.changeSlide();
}else{
setTimeout(()=>{
this.show = true;
},3000);
setTimeout(()=>{
this.show = false;
this.index++;
this.changeSlide();
},24000);
}
}
},
computed : {
slideshow(){
}
}
}
</script>
<style>
.fade-leave-active,
.fade-enter-active {
transition : transform 2s linear;
}
.fade-enter {
transform : translateX(-100vw);
}
.fade-leave-to{
transform :translateX(100vw);
}
.animation{
animation-name: ala;
animation-duration: 0.2s;
animation-timing-function: ease-in-out;
}
@keyframes ala{
0%{ font-size: 0 px; }
25%{ font-size: 2 px; }
50%{ font-size: 4 px; }
75%{ font-size: 8 px; }
100%{ font-size: 25 px; }
}
</style>
