在 DOM 中添加新元素后，保留元素屏幕位置

Retain element screen position after adding a new element before it in DOM

本文关键字：元素 保留 位置 屏幕 DOM 添加 新元素      更新时间：2023-09-26

我有一个包含两个跨度的div，它们包含文本：

<div class="jumbotron">
    <span id="span-one" class="name-letters">One</span>
    <span id="span-two" class="name-letters">Two</span>
</div>

我在这些跨度上执行CSS动画以将一个元素从另一个元素移开(去掉浏览器前缀以获得更好的可读性( JSFiddle：

#span-two {
    animation-delay: 3s;
    animation-duration: 3s;
    animation-name: slide;
    animation-fill-mode: forwards;
}
@keyframes slide {
    from {
        margin-left: 0%;
    }
    to {
        margin-left: 25%;
    }
}

例：

开始：

One Two

停：

One          Two

现在，我想在动画完成后，在第一个跨度旁边添加第三个跨度。但是，我希望第二个跨度保持其动画结束位置。

例：

我想要什么：

One Three    Two

我得到什么： JSFiddle 

One Three          Two

这是因为我添加到第二个跨度的左边距属性，使其在动画中移动。因此，当我在它之前添加一个新元素时，第二个跨度会进一步移动以满足设置的左边距值。我的问题：在添加第三个跨度后，如何在不移动第二个跨度位置的情况下实现此目的？

您可以将范围 #3 设置为绝对定位(或fixed(，但不指定top和left值 (！(：

#span-three {
    position: absolute;
}

和 

span.id = "span-three";

演示：http://jsfiddle.net/gcgtveo5/2/

我不能写纯 javascript，但你能做这样的事情而不是绝对定位的跨度吗？

.HTML：

<div>
    <div class="container">
    <span id="span-one" class="name-letters">One</span>
    </div>
    <div class="container" id="spanThreeContainer">
    </div>
    <div class="container">
    <span id="span-two" class="name-letters">Two</span>
    </div>

.CSS：

.container {width:33.33%; float:left;}

然后将您的新跨度附加到"#spanThreeContainer"？

相关文章：