Question

我正在处理动画文本元素。

事情是，当我改变一个单词时，我不喜欢它，其他单词突然转移。我尝试使用一种效果，其他移动的单词以一种很好的方式移动。就像在这个例子中一样。

有谁知道怎么做？或链接我到相关的解决方案？

我正在使用HTML，CSS和JS

Answer 1

可能有其他方法可以做到这一点，但我能想到的最一致的跨浏览器方式就是这样。这是一些指导，但代码示例会有所帮助。

您需要将动画字换成额外的span。然后，您需要将外跨度的宽度定义为动画前内跨距的宽度。如果您知道宽度是什么，或者您可以动态地执行此操作，则可以使用CSS执行此操作：

$(outerSelector).width( $(innerSelector).width() + 'px');

为文本设置动画，然后为宽度更改设置动画：

$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);

这真的只适合让它变小。您可以使用此方法使单词更大，但您需要先知道单词的最终宽度。然后你可以只有一个跨度并执行此操作：

$(selector).animate({width:newWidth}, 500);

如果您不担心跨浏览器兼容性，或者您可以假设使用该网站的每个人都启用了CSS 3浏览器，那么您可以使用CSS：

selector {
    transition: width 0.5s;
}

然后你要缩小文字，你需要再次像上面那样设置外跨度宽度，但是在文本动画之后你可以简单地这样做：

$(outerSelector).width( $(innerSelector).width() + 'px');

这有同样的问题，需要事先知道宽度才能转换为更长的文本。您可以使用具有相同文本的另一个跨度找出宽度。

.copy {
    position: absolute;
    left: -100%;
}

然后你可以获得复制版本的宽度，并将其用作动画的新宽度。