javascript - 浏览器仅在 Vue 时应用背景过滤器结束了

Question

我有一个非常简单的 Vue 应用程序，当您单击按钮时，会显示一个模式。

通常，模态框只有半透明的黑色背景，但我想添加一些backdrop-filter: blur(4px);.

你可以注意到，当 Vue<transition />组件结束时，浏览器会添加backdrop-filter: blur(4px);，这很奇怪，因为我认为它应该是实时的。

backdrop-filter: blur(4px);使用<transition />组件时如何制作？

---

请看这个最小的例子，这里是完整的代码和演示视频：

优酷：https : //www.youtube.com/watch?v= 6OJYlxATOh8&feature=youtu.be

完整代码：

<template>
  <div class="container">
    <button @click="click">Open Modal</button>
    <transition name="fade">
      <div v-if="open" class="modal">
        <div class="backdrop"/>
        <button @click="close">Close</button>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false
    };
  },
  methods: {
    click() {
      this.open = true;
    },
    close() {
      this.open = false;
    }
  }
};
</script>

<style lang="scss">
body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-image: url(https://source.unsplash.com/1600x900/?coffee);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;

  > button {
    font-size: 20px;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  > .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

标签： javascripthtmlcssvue.js

Answer 1

我相信这就是您正在寻找的：

<template>
  <div class="container">
    <button @click="click">Open Modal</button>
    <transition name="modal-fade">
      <div class="modal-outer" v-if="open">
        <div class="backdrop"/>
        <div class="modal">
          <button @click="close">Close</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false
    };
  },
  methods: {
    click() {
      this.open = true;
    },
    close() {
      this.open = false;
    }
  }
};
</script>

<style lang="scss">
body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-image: url(https://source.unsplash.com/1600x900/?coffee);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;

  > button {
    font-size: 20px;
  }
}
.modal-outer {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  transition: 0.5s;
  backdrop-filter: blur(4px);
}
.modal-fade-enter {
  opacity: 0;
}
.modal-fade-enter-active {
  transition: 0.5s;
  animation: blur-in 0.5s ease-in-out forwards;
}
.modal-fade-leave {
  opacity: 1;
}
.modal-fade-leave-active {
  transition: 0.5s;
  animation: blur-out 0.5s ease-in-out forwards;
  opacity: 0;
}
@keyframes blur-in {
  from {
    backdrop-filter: blur(0px);
  }
  to {
    backdrop-filter: blur(4px);
  }
}
@keyframes blur-out {
  from {
    backdrop-filter: blur(4px);
  }
  to {
    backdrop-filter: blur(0px);
  }
}
</style>

---