I am attempting to incorporate transitions on divs when the page loads, but I am encountering difficulties getting it to work.
template
<header>
<transition name="slideLeft">
<div v-show="loaded" class="contents content-left"></div>
</transition>
<transition name="slideRight">
<div v-show="loaded" class="contents content-right"></div>
</transition>
</header>
script
data(){
return {
loaded: false,
};
},
created(){
this.onLoaded();
},
methods: {
onLoaded() {
this.loaded = true;
}
}
css
.slideLeft-enter-active{
width: 400px;
}
.slideRight-enter-active{
width: 400px;
}
header {
background-color: #1b1d1f;
height: 100vh;
display: flex;
justify-content: center;
}
header .contents {
transition: 2s;
width: 0;
background-color: #151618;
}
Could someone please help me identify what might be causing the issue here?