javascript - 插入新元素时如何平滑移动?
问题描述
我在其他元素的中间插入了一个新的 div 元素,我希望其他元素以流畅的方式移动到他们的新位置,而不是像现在这样突然移动。
这是我的代码:https ://codepen.io/BigEiffelTower/pen/vYBgqZq
<div id="top">
Top of the page
</div>
<div id="middle">
</div>
<div id="bottom">
<form>
<input type="button" value="Add an element">
</form>
End of the page
</div>
#top, #middle, #bottom {
font-size: 1.5em;
border: 2px solid black;
margin: 0.3em
transition: all 2s ease;
}
var btn = document.querySelector('input');
btn.addEventListener('click', updateBtn);
function updateBtn() {
$el = $("<div>", {
id: 'middle-item',
text: "New element"
});
$("#middle").append($el);
}
单击按钮时如何使#three元素平滑移动?
解决方案
你可以用animate()
函数来做到这一点。
var btn = document.querySelector("input");
btn.addEventListener("click", updateBtn);
function updateBtn() {
$el = $("<div>", {
id: "middle-item",
text: "New element",
style: "display: none"
});
$("#middle")
.append($el)
.animate({ height: "+=" + $el.height() }, 200, function() {
$el.fadeIn(100);
});
}
/* You don't need to define a `css transition` anymore. */
#top, #middle, #bottom {
font-size: 1.5em;
border: 2px solid black;
margin: 0.3em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
Top of the page
</div>
<div id="middle">
</div>
<div id="bottom">
<form>
<input type="button" value="Add an element">
</form>
End of the page
</div>
推荐阅读
- c# - 对路径的访问被拒绝到虚拟目录的物理路径
- c# - 如何处理 Xamarin.forms webview 中的加载错误
- python - SyntaxError 剩余/在 py 文件中的行之间移动
- jwt - Sequelize - 模型设置器方法不起作用,我没有收到任何错误
- woocommerce - WooCommerce 中是否有办法在产品类别显示之后但在产品之前显示自定义内容?
- c++ - 设计一个带有两个指向嵌套对象的指针的迭代器
- c# - 使用 safebrowsinglookup 库的 GoogleSafeBrowsing api
- sql - 查询输出
- sql-server - 将总计算百分比保留在堆积条形图的顶部 - SSRS
- node.js - 无法访问托管在我的公共 IP 上的网页