Javascript 带vue的过渡色

我正在尝试使用vue在按钮上单击以转换覆盖颜色。 当我点击它的时候，ovelay会很快显示出来，我需要它在做的时候从深色过渡到浅色，但我不知道如何使用vue，因为我是新手。 下面是我的代码和指向我的代码和boox的链接

<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>

这是指向代码沙盒的链接

使用一个和特定的类来控制动画

newvue({
el:“#应用程序”，
数据：（）=>（{toggle:false}）
})

.overlay{
背景：rgba（0,0,0,0.9）；
位置：固定；
顶部：2rem/*
<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;
}