Question

我有一个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

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

Answer 1

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

#span-three {
    position: absolute;
}

和

span.id = "span-three";

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

Answer 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'？

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

2 个答案:

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