我的动画淡入淡出不适用于我的模态背景

Question

我已经使用该元素制作了模态，效果很好，尽管我无法让我的背景真正淡入。我也尝试过其他动画方法，例如@keyframes，但这似乎并不可行无论是工作，任何帮助将不胜感激！

.modal {
  display: none;
  grid-template-columns: 1fr 1fr;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  width: 50%;
  border-style: solid;
  border-color: white;
  border-radius: 15px;
  cursor: default;
  user-select: none;
}

.modal::backdrop {
  backdrop-filter: blur(9px);
  background-image: linear-gradient( 150deg, rgba(255, 0, 255, 0.5), rgba(102, 51, 153, 0.5), rgba(30, 144, 255, 0.5), rgba(0, 0, 0, 0.5));
  transition: background-image 0.6s ease;
}

<dialog class="modal">
  <section>
    <h2 class="modalTitle">Placeholder</h2>
    <p class="modalDescription">Placeholder</p>
  </section>
  <section>
    <img class="modalImage" src="./img/placdeholder" alt="Placeholder" />
  </section>
</dialog>

Answer 1

正如Mister Jojo所说，你必须使用一点Javascript，但这并不太繁重。

您可以使用

@property

语法来设置渐变动画并在

transition

CSS 属性中使用这些渐变。 这里有一些关于 CSS 技巧的信息可以帮助您入门。

我们所做的就是添加一个

@property

规则来定义我们的不透明度起始值，然后在我们的

linear-gradient

属性中设置 css 变量。我们添加一些 javascript 以在单击时添加一个类，然后将相同的 css 变量设置为我们的新值。请参阅下面的示例代码：

const dialog = document.querySelector("dialog");
document.querySelector("#show_dialog").addEventListener("click", () => {
  dialog.showModal();
  dialog.classList.add("shown");
});

document.querySelector("#close_dialog").addEventListener("click", () => {
  dialog.close();
  dialog.classList.remove("shown");
});

@property --opacity {
  syntax: '<number>'; 
  inherits: false;
  initial-value: 0;
}

.modal {
  grid-template-columns: 1fr 1fr;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  width: 50%;
  border-style: solid;
  border-color: white;
  border-radius: 15px;
  cursor: default;
  user-select: none;
}

.modal::backdrop {
  backdrop-filter: blur(9px);
  background-image: linear-gradient( 150deg, rgba(255, 0, 255, var(--opacity)), rgba(102, 51, 153, var(--opacity)), rgba(30, 144, 255, var(--opacity)), rgba(0, 0, 0, var(--opacity)));
  transition: --opacity 2s ease;
}

.modal.shown::backdrop {
  --opacity: 1;
}

<button id='show_dialog'>Show dialog</button>
<dialog class="modal">
  <section>
    <h2 class="modalTitle">Placeholder</h2>
    <p class="modalDescription">Placeholder</p>
    <button id='close_dialog'>Close</button>
  </section>
</dialog>

注意：目前这不适用于 Firefox，但已包含在刚刚发布的版本 124 中，因此将几乎完全覆盖浏览器。