Question

我正在尝试通过在弹出窗口上使用过渡和使用不透明度来使弹出窗口淡入。

您应该能够通过单击“瓶子”文本来切换弹出窗口。

我似乎无法找到问题所在。有什么帮助吗？这是我的代码：

HTML：

    <div class="box">
          <div class="box_container">
            <img src="images/blikje.png" alt="bottle">
            <h3>Bottle</h3>
          </div>
          <div class="box_popup">
            <img src="images/blikje.png" alt="bottle">
            <div class="box_popup-content">
              <h2>bottle</h2>
              <hr>
              <p>test</p>
            </div>
          </div>
        </div>

CSS：

.box_popup{
 opacity: 0;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 10vh;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 display: none;
 align-items: center;
 justify-content: center;
 transition:all 1s ease-in;
 }

.box.active .box_popup{
 opacity: 1;
 z-index: 1000;
 display: flex;
 transition:all 1s ease-in;
 }

JS：

<script>

    let box = document.querySelectorAll('.box');
    box.forEach(popup => popup.addEventListener('click', () => {
    popup.classList.toggle('active');
    }))

     </script>

和弹出窗口的 ss： ss of popup 提前致谢。

Answer 1

删除 display:none 中的 .box_popup 声明，因为它隐藏了元素。

来自 MDN：

<块引用>

[display: none] 关闭元素的显示，使其对布局没有影响（文档呈现为好像该元素不存在一样）。所有后代元素的显示也被关闭。要让元素占用它通常占用的空间，但不实际渲染任何内容，请改用可见性属性。

let box = document.querySelectorAll('.box');
box.forEach(popup => popup.addEventListener('click', () => {
  popup.classList.toggle('active');
}))

.box_popup {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10vh;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in;
}

.box.active .box_popup {
  opacity: 1;
  z-index: 1000;
  display: flex;
  transition: all 1s ease-in;
}

<div class="box">
  <div class="box_container">
    <img src="images/blikje.png" alt="bottle">
    <h3>Bottle</h3>
  </div>
  <div class="box_popup">
    <img src="images/blikje.png" alt="bottle">
    <div class="box_popup-content">
      <h2>bottle</h2>
      <hr>
      <p>test</p>
    </div>
  </div>
</div>

display property

弹出窗口的过渡不会淡入

1 个答案: