在动画一个单词时移动文本答案

【问题标题】：Move text while one word is being animated在动画一个单词时移动文本
【发布时间】：2014-06-27 17:16:46
【问题描述】：

我正在制作一个动画文本元素。

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

有人知道怎么做吗？或将我链接到相关解决方案？

我正在使用 HTML、CSS 和 JS

【问题讨论】：

【解决方案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%;
}

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

【讨论】：