Question

我想要一个按钮来触发弹出窗口。单击按钮时会显示弹出消息，但它确实突然发生，因此我想添加一个过渡，但似乎不起作用。

HTML：

<button class="terug"></button>

CSS：

img.popup{
    width: 15em;
    position: absolute;
    top: 25em;
    left: 4em;
    transition: ease-in 1s;
  }

JS：

var uno =       document.querySelector('button.terug');

var popup = document.querySelector('img.popup');

uno.addEventListener ('click', function(){
    popup.classList.toggle('popup');
});

Answer 1

也许：

    var popup = document.querySelector('img');

代替：

    var popup = document.querySelector('img.popup');

Answer 2

这是使用纯JavaScript的一种方式。尽管我建议您使用第三个库或Jquery插件。

const openPopup = () => {
  const popup = document.getElementById("popup");
  popup.classList.add("opened");
}

.image-popup {
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  opacity: 0;
  transition: all 1s ease-in-out;
  height: 0;
  overflow: hidden;
}

.image-popup.opened {
  opacity: 1;
  height: auto;
}

<button onclick="openPopup()">Open image</button>
<div id="popup" class="image-popup">
  <img src="https://placeimg.com/400/400/any">
</div>

单击按钮时CSS过渡不起作用

2 个答案: