[英]How to make old text slide down as new text is added above it?
I am feeding text to a div from the top.我正在从顶部向 div 输入文本。
The following code gives the newest paragraph a slide-down animation as it is added to the div.以下代码在将最新段落添加到 div 时为它提供了一个向下滑动的动画。
How can I make all paragraphs slide down as the new one is created?如何在创建新段落时让所有段落向下滑动? Also, any tips on my code will be greatly appreciated!此外,对我的代码的任何提示将不胜感激!
HTML: HTML:
<div id="text">
Javascript: Javascript:
function addText(message) {
var el = document.getElementById('text');
var p = document.createElement('p');
p.appendChild(document.createTextNode(message));
el.insertBefore(p, el.childNodes[0] || null);
$(p).addClass("reveal");
}
CSS: CSS:
.reveal {
animation: slide-down 1s;
}
@keyframes slide-down {
from {
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
to {
opacity: 1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
-moz-animation: linear;
-webkit-animation: linear;
animation: linear;
}
}
Can you try this.你可以试试这个。
function addText(message) {
$('p').removeClass("reveal");
setTimeout(function(){
var el = document.getElementById('text');
var p = document.createElement('p');
p.appendChild(document.createTextNode(message));
el.insertBefore(p, el.childNodes[0] || null);
$('p').addClass("reveal");
}, 500);
}
addText('Welcome to first paragrap');
Then you call second one in console.然后你在控制台中调用第二个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.