我试图设计一个消息框,可以通过调用以下函数来显示:CSS/JS:追加元素不动画
function showMsg(msg, state){ //state: -1: red, 0: orange (normal), 1: green
var bg = document.createElement("div");
bg.className = "msgBG";
//RELEVANT ->
var fg = document.createElement("div");
fg.className = "msgFG";
//<- RELEVANT
var text = document.createElement("span");
text.className = "msgText";
text.innerText = msg;
var button = document.createElement("button");
button.className = "mediumButton msgButton";
button.innerText = "OK";
fg.appendChild(text);
fg.appendChild(button);
bg.appendChild(fg);
document.body.appendChild(bg);
}
的想法是,该fg
从淡入在页面底部创建的时候,所以我用下面的CSS来做到这一点:正在创建
.msgFG{
position:absolute;
top: calc(50% - 200px);
left: calc(50% - 300px);
width:600px;
height:400px;
margin:0 auto;
background-color:var(--bg-color);
border: solid 5px var(--fg-color);
border-radius:20px;
animation-name: msgFGAppear;
animation-delay: 5s;
}
@keyframes msgFGAppear{
from{
top:100%;
}
to{
top: calc(50% - 200px);
}
}
的fg
和定位正确,但没有动画。所以最终的结果是我想要的,但动画不会触发淡入淡出效果 ...我做错了什么?
如果您不知道我的意思,请随时向下面提问。
我知道这是错别字... – Unknown