My current code snippet is as follows...
<template>
<div class="layered-image fit">
<img src="/img/Stars-background.svg" class="img1"/>
<img ref="img2" src="/img/Mo-zen.svg" class="img2" />
</div>
</template>
<script setup>
import {ref, onMounted} from "vue";
const img2 = ref(null);
onMounted(()=>{
console.log("Setting the style");
img2.value.style.bottom = "10%";
})
</script>
<style>
.img1 {
position: absolute;
bottom: 0;
left: calc( 50% - 400px );
}
.img2 {
position: absolute;
bottom: 20%;
transition: bottom 2s linear;
right: calc( 50% - 280px );
}
.fit {
height: 100%;
width:100%;
}
</style>
I am attempting to adjust the image position incrementally from 20% to 10% over a period of 2 seconds once the component is loaded. However, it appears that only setting it to 10% without any smooth transition. How can I achieve the proper transitioning effect for the bottom property?