Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue
https://i.stack.imgur.com/zboCb.png
Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3-second transition period for scaling.
https://i.stack.imgur.com/ignib.png
I'm looking to figure out how to turn the square green once the scaling animation is finished using Vue.
<template>
<div id="container">
<div
id="box"
v-on:click.stop="this.clickAction"
:class="this.isClicked ? ' changed' : ''"
></div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
isClicked: false,
};
},
methods: {
clickAction() {
console.log("click");
this.isClicked = true;
},
},
};
</script>
<style>
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
#box {
background-color: brown;
padding: 2em;
margin: 2em;
width: 100px;
height: 100px;
}
#box:hover {
cursor: pointer;
opacity: 80%;
}
.changed {
background-color: cyan !important;
transform-origin: center;
transition: transform 3s;
transform: scale(2);
}
</style>