javascript - 如何在不添加新行的情况下添加动画消失文本

Question

我正在尝试添加弹出消息，通过向顶部移动一点然后消失来确认各种操作。我使用 CSS3 动画来实现这一点:

#message-boxOK {
width: 200px;
background-color: #80b95c;
position: relative;
float: middle;
padding: 10px 10px;
text-align: center;
border-radius: 5px;
margin: 0 auto;
-webkit-animation-name: rise; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: rise;
animation-duration: 2s;
}
/* Standard syntax */
@keyframes rise {
0%   {bottom:25px;}
100% {bottom:100px;}
}

我使用 JavaScirpt 来启动这些消息:

function messageBox(message,type) {
if(type=="ok"){
    document.getElementById("dump-message").innerHTML ="<div id='message-  boxOK'>"+message+"</div>";
    setTimeout("document.getElementById('message-boxOK').remove()",1900);
}
else {
    document.getElementById("dump-message").innerHTML ="<div id='message-box'>"+message+"</div>";
    setTimeout("document.getElementById('message-box').remove()",1900);
}

}`

但是当 JS 添加一个带有消息的新 div 时，文档中会出现一个新行并且其他内容会移动。再次移除时，线条消失，其他内容移动。

那么我怎样才能让这个动画在不移动的情况下出现在其他内容之上。我需要在文档中间某处的消息。或者可能有一些其他方式或插件来显示临时弹出窗口。

Answer 1

position: absolute 在这里会有所帮助。

绝对定位使元素完全脱离文档流，因此当您的消息出现和消失时不会影响其他内容。相比之下， float 元素仍然是文档流的一部分，这会导致您在出现/消失时看到的内容发生变化。

请看下面的例子:

function messageBox(message, type) {
  if (type == "ok") {
    document.getElementById("dump-message").innerHTML = "<div id='message-boxOK'>" + message + "</div>";
    setTimeout("document.getElementById('message-boxOK').remove()", 1900);
  } else {
    document.getElementById("dump-message").innerHTML = "<div id='message-box'>" + message + "</div>";
    setTimeout("document.getElementById('message-box').remove()", 1900);
  }
}

messageBox('Passing by!', 'ok');

*, :before, :after {
 box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bg-top {
 background: red;
  width: 100%;
  height: 50px;
}

.bg-bottom {
 background: blue;
  width: 100%;
  height: 50px;
}

#dump-message {
  margin-top: 100px;
}

#message-boxOK {
  width: 200px;
  background-color: #80b95c;
  position: absolute; 
  left: 50%; 
  margin-left: -100px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
 
  -webkit-animation-name: rise;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: rise;
  animation-duration: 2s;
}
/* Standard syntax */

@keyframes rise {
  0% {
    bottom: 25px;
  }
  100% {
    bottom: 100px;
  }
}

<div class='bg-top'></div>
<div id='dump-message'></div>
<div class='bg-bottom'></div>