我有一个在父div中移动不同子元素的JavaScript函数,但我想添加一个转换,以便元素移动到它们在div中的新位置,而不是立即更改位置.
就我使用的过渡而言,对我来说,它只适用于定义的属性,如top
/bottom
或height
/width
.在本例中,我没有定义任何属性,所以我想知道是否仍然可以使用过渡效果.
在这里,您可以看到我设置的子元素和父元素,以及我的移动子元素的函数:
function moveElement(elementId, place) {
let div = document.getElementById('parent')
let element = document.getElementById(String(elementId))
let referencenode = div.children[place]
div.insertBefore(element, referencenode)
}
var children = document.getElementById('parent').children;
document.addEventListener("click", function(event) {
let id = children.item(2).id;
moveElement(id, 0)
});
<div id="parent">
<div id="child1" style="background-color:red" class="child">
<p>child1</p>
</div>
<div id="child2" style="background-color:lightblue" class="child">
<p>child2</p>
</div>
<div id="child3" style="background-color:green" class="child">
<p>child3</p>
</div>
<div id="child4" style="background-color:yellow" class="child">
<p>child4</p>
</div>
</div>
由于我所有进行工作转换的try 都失败了,我只离开了switch 功能,所以他们立即交换了位置.
我try 使用transition-duration
,但由于没有定义任何css属性,因此预计不会发生任何情况.
提前谢谢!
请不要使用jQuery,因为我从来没有使用过它,所以如果可能的话,我会很感激普通的JavaScript:)