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会有所帮助。

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

请参阅以下示例：

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>

如何添加动画消失的文本，而不添加新行

1 个答案: