Javascript 插入新元素时,如何平滑移动? 我在另一个中间插入一个新的div元素,我希望其他人以一种流畅的方式移动到新的位置,而不是像现在那样突然。
以下是我的代码:Javascript 插入新元素时,如何平滑移动? 我在另一个中间插入一个新的div元素,我希望其他人以一种流畅的方式移动到新的位置,而不是像现在那样突然。,javascript,html,css,smoothing,insertion,Javascript,Html,Css,Smoothing,Insertion,以下是我的代码: 页首 页末 #上、中、下{ 字号:1.5em; 边框:2件纯黑; 保证金:0.3em 过渡:一切都很轻松; } var btn=document.querySelector('input'); btn.addEventListener('click',updateBtn); 函数updateBtn(){ $el=$(“”{ id:'中间项', 案文:“新元素” }); $(“#中”)。追加($el); } 单击按钮时如何使“三元素”平稳移动?希望此代码能帮助您: HTM
页首
页末
#上、中、下{
字号:1.5em;
边框:2件纯黑;
保证金:0.3em
过渡:一切都很轻松;
}
var btn=document.querySelector('input');
btn.addEventListener('click',updateBtn);
函数updateBtn(){
$el=$(“”{
id:'中间项',
案文:“新元素”
});
$(“#中”)。追加($el);
}
单击按钮时如何使“三元素”平稳移动?希望此代码能帮助您: HTML:
<div id="top">
Top of the page
</div>
<div id="middle">
<ul>
</ul>
</div>
<div id="bottom">
<form>
<input type="button" value="Add an element">
</form>
End of the page
</div>
button {
display: block;
margin: 0 auto;
cursor: pointer;
border: none;
width: 150px;
height: 40px;
border-radius: 5px;
}
ul {
list-style: none;
padding: 10px;
margin: 0;
text-align: center;
}
li {
width: 100px;
height: 50px;
cursor: pointer;
margin: 0 3px;
transform-orgin: center;
transition: all 0.2s ease-in-out;
animation-name: popin;
animation-duration: 0.3s;
animation-timing-function: easeout;
}
li.transReset {
transition: intial;
}
li:hover{
transform: scale(1.2);
}
@keyframes popin {
0% {
transform: scale(0.2);
}
75% {
transform: scale(1.2);
animation-timing-function: easeout;
}
100% {
transform: scale(1);
}
}
var btn = document.querySelector('input');
btn.addEventListener('click', updateBtn);
function updateBtn() {
$el = $("<li>", {
id: 'middle-item',
text: "New element"
});
$n = $("<li></li>").hide().addClass('transReset');
$("#middle").append($el);
$n.show(300, function() { $(this).removeClass('transReset') });
}
JAVASCRIPT:
<div id="top">
Top of the page
</div>
<div id="middle">
<ul>
</ul>
</div>
<div id="bottom">
<form>
<input type="button" value="Add an element">
</form>
End of the page
</div>
button {
display: block;
margin: 0 auto;
cursor: pointer;
border: none;
width: 150px;
height: 40px;
border-radius: 5px;
}
ul {
list-style: none;
padding: 10px;
margin: 0;
text-align: center;
}
li {
width: 100px;
height: 50px;
cursor: pointer;
margin: 0 3px;
transform-orgin: center;
transition: all 0.2s ease-in-out;
animation-name: popin;
animation-duration: 0.3s;
animation-timing-function: easeout;
}
li.transReset {
transition: intial;
}
li:hover{
transform: scale(1.2);
}
@keyframes popin {
0% {
transform: scale(0.2);
}
75% {
transform: scale(1.2);
animation-timing-function: easeout;
}
100% {
transform: scale(1);
}
}
var btn = document.querySelector('input');
btn.addEventListener('click', updateBtn);
function updateBtn() {
$el = $("<li>", {
id: 'middle-item',
text: "New element"
});
$n = $("<li></li>").hide().addClass('transReset');
$("#middle").append($el);
$n.show(300, function() { $(this).removeClass('transReset') });
}
var btn=document.querySelector('input');
btn.addEventListener('click',updateBtn);
函数updateBtn(){
$el=$(“”{
id:'中间项',
案文:“新元素”
});
$n=$(“ ”).hide().addClass('transReset');
$(“#中”)。追加($el);
$n.show(300,function(){$(this.removeClass('transReset')});
}
您可以使用animate()
函数来完成
var btn=document.querySelector(“输入”);
btn.addEventListener(“单击”,更新btn);
函数updateBtn(){
$el=$(“”{
id:“中间项”,
文本:“新元素”,
样式:“显示:无”
});
$(“#中”)
.追加($el)
.animate({height:+=“+$el.height()},200,function()){
法代因(100美元);
});
}
/*您不再需要定义“css转换”*/
#上、中、下{
字号:1.5em;
边框:2件纯黑;
保证金:0.3em
}
页首
页末
取决于您想要的动画。例如,可以为新元素的高度设置动画,或为底部元素的位置/边距设置动画。