javascript - 切换 CSS 关键帧

Question

我有一个弹出窗口，在单击按钮时打开，然后在您单击另一个按钮或在弹出窗口之外关闭。我希望弹出窗口在打开时淡入并在关闭时淡出。如何使用 javascript 在两个关键帧之间切换？

我试图用javascript切换类来做到这一点，但这不起作用。

var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
  popup.style.display = "block";
  popup.className = "opened";
  popup_content = "opened";
}
span.onclick = function() {
  popup.style.display = "none";
  popup.className = "closed";
  popup_content = "closed";
}
window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
    popup.className = "closed";
    popup_content = "closed";
  }
}

#popup {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#popup_content {
  position: relative;
  margin: auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.closed {
  -webkit-animation-name: animate-in;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-in;
  animation-duration: 0.6s;
}

.opened {
  -webkit-animation-name: animate-out;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-out;
  animation-duration: 0.6s;
}

@-webkit-keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

#close {
  float: right;
  cursor: pointer;
  margin: -15px -15px 0 0;
}

<button id="add">Open popup</button>


<div class="closed" id="popup">
  <div class="closed" id="popup_content">
    <i class="fas fa-times-circle" id="close">Close</i> //////content
  </div>
</div>

实现我的目标的最佳方式是什么？

标签： javascripthtmlcsscss-animationskeyframe

Answer 1

使用 CSS 应用动画。不要使用 display none / block 属性或片段。您可以改为使用 transition 属性和 opacity 属性进行淡入/淡出。

这是代码示例

    var popup = document.getElementById("popup");
    var popup_content = document.getElementById("popup_content");
    var add = document.getElementById("add");
    var span = document.getElementById("close");

    add.onclick = function() {
        popup.className="opened";
        popup_content.className="opened";
    }
    span.onclick = function() {

        popup.className="closed";
        popup_content.className="closed";
    }
    window.onclick = function(event) {
        if (event.target == popup) {

        popup.className="closed";
        popup_content.className="closed";
        }
    }

#popup {
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
    
        #popup_content {
            position: relative;
            margin: auto;
        	background-color: white;
            width: 80%;
            max-width: 500px;
        	border-radius: 5px;
            padding: 20px;
        	text-decoration: none;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
        }
    
        .closed {
            opacity:0;
           visibility:hidden;
           transition: opacity 0.8s ease;
        }
    
        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease;
        }
    
        #close {
            float: right;
            cursor: pointer;
            margin: -15px -15px 0 0;
        }

<button id="add">Open popup</button>


<div class="closed" id="popup">
    <div class="closed" id="popup_content">
        <i class="fas fa-times-circle" id="close">Close</i>
             //////content
    </div>
</div>