javascript - 如何在旧文本上方添加新文本时使旧文本向下滑动?
问题描述
我从顶部向 div 提供文本。
以下代码在将最新段落添加到 div 时为它提供了一个向下滑动的动画。
创建新段落时,如何使所有段落向下滑动?此外,我的代码的任何提示将不胜感激!
HTML:
<div id="text">
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:
.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;
}
}
解决方案
你能试试这个。
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');
然后你在控制台中调用第二个。
推荐阅读
- python - 使用 ptb 进行 Python 日志记录:同一行记录了两次,但只添加了一个处理程序
- azure - M 分区使用数据函数,导致访问与模型中定义的数据源不同的数据源
- python-3.x - 如何为团队添加名称?
- rspec - RSpec - 如何在所有请求测试中全局设置 https 协议
- python - sqlalchemy 'SELECT * INTO ##temptable' 配方无法使用文字绑定进行编译
- gradle - 在 Gradle 构建中定义 Maven 存储库后,如何将其替换为本地目录?
- assembly - 使用 8086 汇编语言与 Arduino 进行串行通信
- awk - 查找与表达式匹配的行,复制整行,插入新行并替换表达式
- c# - 实体框架错误:在使用复合键生成模型期间检测到一个或多个验证错误
- java - Lambda Java - 迭代一个 Json 对象。看起来里面是重复的