使用vue过渡颜色答案

【问题标题】：transition colours with vue使用vue过渡颜色
【发布时间】：2020-07-13 23:56:36
【问题描述】：

我正在尝试在单击带有 vue 的按钮时转换覆盖颜色。当我单击它时，overlay 会快速显示，我需要它在执行此操作时从较暗过渡到较亮，但我不知道如何使用 vue，因为我是新手。下面是我的代码和我的代码沙箱的链接。

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

这是代码沙盒的链接 https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

使用<transition> component 和特定的类来控制动画

new Vue({
  el: '#app',
  data: () => ({ toggle: false })
})

.overlay {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 2rem; /* ? just so we can still see the link */
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
}

/* Transition animation defined here for "fade" */

/* Define the transition for when the element is appearing / leaving */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

/* Define the enter and gone state */
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* Optionally, define the entered and leaving state */
.fade-enter-to, .fade-leave {
  opacity: 1; /* Optional because this is the default opacity anyway */
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div class="hello">
    <div class="meal__status">
      <a @click="toggle = !toggle" class="meal__status-wrap">
        <span>Click me</span>
      </a>
    </div>
    <transition name="fade"> <!-- ? the name sets the CSS class prefix -->
      <div v-if="toggle" class="overlay"></div>
    </transition>
  </div>
</div>

【讨论】：