我正在尝试设计一个消息框,可以通过调用以下函数来显示:
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
,但没有动画。所以最终结果是我想要的,但动画不会为了淡入那个结果而触发......我做错了什么?
如果您不明白我的意思,请随时在下面提问。
将动画延迟:5s;更改为动画持续时间:5s;它将起作用
我创建了一个用于演示目的的 plunkr。
您缺少一个重要的属性"动画持续时间"
https://plnkr.co/edit/1sytQlOk90Du3ibGE6T5?p=preview
.msgFG{
position:absolute;
top: calc(50% - 200px);
left: calc(50% - 300px);
margin:0 auto;
border-radius:20px;
animation: msgFGAppear 12s normal ;
}
@keyframes msgFGAppear{
from{
top:100%;
}
to{
top: calc(50% - 200px);
}
}