Question

我试图在单击带有vue的按钮时转换叠加颜色。当我单击它时，ovelay会快速显示，我需要它在执行过程中从更暗过渡到更亮，但是我不确定如何使用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

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

用vue过渡颜色

1 个答案: