переходные цвета с vue

Question

Я пытаюсь изменить цвет наложения при нажатии кнопки с vue. когда я нажимаю на него, изображение быстро отображается, мне нужно, чтобы он при этом переходил от темного к светлому, но я не уверен, как это сделать с vue, поскольку я новичок в этом. ниже мой код и ссылка на мой код sand 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>

<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

Answer 1

Используйте <transition> компонент и укажите классы c для управления анимацией

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>