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

Question

我有一个包含两个 span 的 div，其中包含文本:

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

我在这些 span 上执行 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

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

Answer 1

您可以将 span #3 设置为绝对定位(或 fixed)，但无需指定 top 和 left 值 (!):

#span-three {
    position: absolute;
}

和

span.id = "span-three";

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