javascript - 带过滤器的背景图像 :blur causes edges to be 'caved in' on a 'fade-in' effect

Question

我有一个带有全屏背景图像的包装器

<div class="bg-img"> </div>

.bg-img {
  background-image: url("https://i.imgur.com/f9u8ET4.jpg");
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  filter:blur(8px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

一旦进入全屏， Angular 落就会因为模糊而塌陷。我认为这是一个简单的修复方法，只需调整宽度和高度，然后稍微增加顶部和左侧的偏移量以隐藏洞穴。

.bg-img {
  background-image: url("https://i.imgur.com/f9u8ET4.jpg");
  position:fixed;
  top:-20px; // adjust the cave in
  left:-20px; // adjust the cave in
  height:125%; // adjust the cave in
  width:125%; // adjust the cave in
  filter:blur(8px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

效果很好。但是我的这个包装器是一个弹出窗口，我想淡入。我创建了一个简单的 fadeIn 动画:

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hidden {
  display: none;
}
.fadeIn {
  animation: fadeIn 1s linear;
}

播放动画时，您会看到我所指的这种“塌陷”效果，就像图像正在重新调整到我定义的新宽度和高度一样。我包含了一个片段以更好地展示我的错误。

我不确定如何删除这个不需要的重新调整。老实说，不能完全确定是重新调整的问题，就好像 fadeIn 动画只是跳跃 接近尾声。

function displayImage() {
  var image = document.getElementById("bg");
  image.classList.remove("hidden");
  image.classList.add("fadeIn");
}

.bg-img {
  background-image: url("https://i.imgur.com/f9u8ET4.jpg");
  position: fixed;
  top: -20px;
  left: -20px;
  height: 125%;
  width: 125%;
  filter: blur(8px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hidden {
  display: none;
}

.fadeIn {
  animation: fadeIn 1s linear;
}

<button onclick="displayImage();">Show Image</button>
<div id="bg" class="hidden bg-img"></div>

Answer 1

这与其说是一种解决方案，不如说是一种 hack，但我通常使用嵌套的 div，其中外部的 divs 被放大和动画化，而内部的 div 具有 bg 图像并被模糊。这是一个例子:

function displayImage() {
  var image = document.getElementById("bg_wrapper");
  image.classList.add("fadeIn");
}

.bg_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: scale(1.1);
  opacity: 0;
  pointer-events: none;
  transition: all 1s;
}
.bg-img {
  background-image: url("https://i.imgur.com/f9u8ET4.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
}

.bg_wrapper.fadeIn {
  opacity: 1;
  pointer-events: auto;
}

<button onclick="displayImage();">Show Image</button>
<div id="bg_wrapper" class="bg_wrapper"><div id="bg" class="bg-img"></div></div>