Being new to Vue.js, I am looking to create a simple animation on component load for the first time.
You can find my initial code here:
<template>
<div id="app">
<div class="rect" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
height: 100%;
}
</style>
I want the red rectangle's height to go from 0% to 100% in 2 seconds on the first load and then behave as it does now (changing height on hover).
In order to achieve this, I introduced an isFirstLoad variable and toggled between two new classes height-0 and height-100.
You can view the updated code here:
<template>
<div id="app">
<div class="rect" :class="{ 'height-100': isFirstLoad }" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function () {
return {
isFirstLoad: true,
};
},
mounted() {
setTimeout(() => {
this.isFirstLoad = false;
}, 2000);
},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
.height-0 {
height: 0%;
}
.height-100 {
height: 100%;
}
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
}
</style>
The animation works correctly on the first load but afterwards, the rectangle's height remains at 0%. How can I resolve this issue?