I am faced with the challenge of creating a transition effect for an overlay color when a button is clicked using Vue. Currently, the overlay appears abruptly, but I would like it to smoothly transition from a darker shade to a lighter one. As a newcomer to Vue, I am unsure of how to achieve this. Below is the code snippet along with a link to the sandbox where you can view the code in action.
<template>
<div class="hello">
<div class="meal__status">
<a @click="toggle = !toggle" class="meal__status-wrap">
<span>Click me</span>
</a>
</div>
<div v-if="toggle" class="overlay"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
toggle: false
};
}
};
</script>
.overlay {
background: rgba(0, 0, 0, 0.9);
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
text-align: center;
transition: opacity 500ms;
opacity: 1;
}
To view the code in the sandbox, click on the following link: https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue