如何使用JavaScript制作关闭按钮？

Question

我从JS开始，我想使关闭按钮关闭此代码上的div .popup1：

https://jsfiddle.net/74hmx0vb/1

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">

        </div>
        <div class="textpopup2">

        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

我猜最好的选择是使关闭按钮在单击时调用一个函数，该函数添加带有显示的类：无，对吗？ 单击关闭按钮时，我还想添加一个淡入淡出过渡。

怎么做？ 还有其他更好的选择吗？

Answer 1

没错，一个应用类的函数将在您要查找的情况下起作用，在这种情况下，您可以拥有一个在单击关闭按钮时应用类的函数，例如：

var popupEl = document.querySelector( '. popup1' );
var button = document.querySelector( '.close' );

button.addEventListener( 'click', function() {
   popupEl.classList.add( 'closed' );
});

因此，您的DOM将变为：

<div class='popup1 closed' id="popup1">
....

从这种意义上讲，您可以使用不透明度来隐藏元素并将其应用到元素中，例如：

.popup {
   opacity: 1;
   transition: opacity 0.5s ease-out;
}

.closed {
   opacity: 0;
}

最后一件事是，这将使元素仅在具有隐藏的不透明度的情况下可见，为了将其从DOM中删除或完全隐藏，可以在不透明度转换完成时使用transitionend进行监听，例如：

popupEl.addEventListener( 'transitionend', function(){
   popupEl.classList.add( 'removed ');
});

// css
.removed {
   display: none;
}

请注意， transitionend会在两个方向上运行，这意味着在closed或已closed应用或已移除，因此您需要确保仅在元素上存在closed类时才应用已removed类：

popupEl.addEventListener( 'transitionend', function(){
   if( popupEl.classList.contains( 'closed' ) ) {
   popupEl.classList.add( 'removed ');
}
});