Javascript 切换CSS关键帧

我有一个弹出窗口，点击一个按钮就会打开，如果你点击另一个按钮或者在弹出窗口之外，它就会关闭。我希望弹出窗口在打开时淡入，在关闭时淡出。如何使用javascript在两个关键帧之间切换

我试着用javascript来切换类，但那不起作用

var popup=document.getElementById（“popup”）；
var popup_content=document.getElementById（“popup_content”）；
var add=document.getElementById（“add”）；
var span=document.getElementById（“关闭”）；
add.onclick=function（）{
popup.style.display=“block”；
popup.className=“已打开”；
弹出内容=“已打开”；
}
span.onclick=函数（）{
popup.style.display=“无”；
popup.className=“已关闭”；
弹出内容=“已关闭”；
}
window.onclick=函数（事件）{
如果（event.target==弹出窗口）{
popup.style.display=“无”；
popup.className=“已关闭”；
弹出内容=“已关闭”；
}
}

#弹出窗口{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
}
#弹出内容{
位置：相对位置；
保证金：自动；
背景色：白色；
宽度：80%；
最大宽度：500px；
边界半径：5px；
填充：20px；
文字装饰：无；
盒影：0 8px 16px 0 rgba（0,0,0,0.5）；
}
.关闭{
-webkit动画名称：在中设置动画；
-webkit动画持续时间：0.6s；
动画名称：在中设置动画；
动画持续时间：0.6s；
}
.打开{
-webkit动画名称：动画输出；
-webkit动画持续时间：0.6s；
动画名称：动画输出；
动画持续时间：0.6s；
}
@-webkit关键帧在中设置动画{
从{
不透明度：0
}
到{
不透明度：1
}
}
@关键帧在中设置动画{
从{
不透明度：0
}
到{
不透明度：1
}
}
@-webkit关键帧动画输出{
从{
不透明度：1
}
到{
不透明度：0
}
}
@关键帧设置动画{
从{
不透明度：1
}
到{
不透明度：0
}
}
#接近{
浮动：对；
光标：指针；
利润：-15px-15px 0；
}

打开弹出窗口
关闭///content

使用CSS应用动画。请勿使用“显示无/块”属性或代码段。您可以改为使用渐变属性和不透明度属性进行淡入/淡出

下面是一个代码示例

var popup=document.getElementById（“popup”）；
var popup_content=document.getElementById（“popup_content”）；
var add=document.getElementById（“add”）；
var span=document.getElementById（“关闭”）；
add.onclick=function（）{
popup.className=“已打开”；
弹出内容。className=“已打开”；
}
span.onclick=函数（）{
popup.className=“closed”；
弹出内容。className=“已关闭”；
}
window.onclick=函数（事件）{
如果（event.target==弹出窗口）{
popup.className=“closed”；
弹出内容。className=“已关闭”；
}
}

#弹出窗口{
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
}
#弹出内容{
位置：相对位置；
保证金：自动；
背景色：白色；
宽度：80%；
最大宽度：500px；
边界半径：5px；
填充：20px；
文字装饰：无；
盒影：0.8px 16px 0 rgba（0,0,0,0.5）；
}
.关闭{
不透明度：0；
可见性：隐藏；
过渡：不透明度0.8s；
}
.打开{
不透明度：1；
能见度：可见；
过渡：不透明度0.8s；
}
#接近{
浮动：对；
光标：指针；
利润：-15px-15px 0；
}

打开弹出窗口
接近
//////内容

我会使用一个转换-查看css和js中关于我所更改内容的注释：

var popup=document.getElementById（“popup”）；
var add=document.getElementById（“add”）；
var span=document.getElementById（“关闭”）；
add.onclick=function（）{
popup.className=“opened”；//只需转换弹出窗口
}
span.onclick=函数（）{
popup.className=“已关闭”；
}
window.onclick=函数（事件）{
如果（event.target==弹出窗口）{
popup.className=“已关闭”；
}
}

#弹出窗口{
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
/*添加以下内容并删除显示：无*/
过渡：不透明度0.6s；
不透明度：0；/*开始关闭，不透明度0隐藏*/
}
#弹出。打开{
不透明度：1；/*添加不透明度1，使其过渡显示*/
}
#弹出窗口。关闭{
/*这将阻止弹出窗口在关闭时覆盖内容*/
指针事件：无；
}
#弹出内容{
位置：相对位置；
保证金：自动；
背景色：白色；
宽度：80%；
最大宽度：500px；
边界半径：5px；
填充：20px；
文字装饰：无；
盒影：0 8px 16px 0 rgba（0,0,0,0.5）；
}
#接近{
浮动：对；
光标：指针；
利润：-15px-15px 0；
}

打开弹出窗口
关闭///content

马哈茂德在尝试引入过渡或动画时使用display:none/block是正确的。与动画相比，这里的过渡也是最好的。我在这里没有提到使用classList.add/remove可以在以后使用类时提供更多的灵活性，因为这不是问题所在，但我认为这是一个重要的旁注。这里的不同之处在于在打开/关闭的类中包含转换的可见性属性。由于可见性是二进制的，非常类似于使用display:none/block，这将从站点中删除转换。对于e

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, visibility 0.8s ease;
        }

        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease, visibility 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>