javascript - 由于添加另一个元素而移动的元素的 DOM 动画

Question

我的问题取决于以下场景:

我有一个 JS 脚本，它将一个 span 元素添加到 div 中。由于 div 具有 text-align:middle;，一旦添加或删除新的跨度，现有的跨度就会向左或向右“跳跃”。

是否有任何方法可以为元素的跳跃设置动画，而无需在每次添加元素时在容器 div 中的每个 span 元素的代码中手动计算它？

你可以在这里看到我的问题:http://dev.choozi.de/slide/tags.php ，当您点击一个标签时，其他标签就会在上方的蓝色框中跳跃。

为了更清楚地说明，由于我添加新元素而移动的其他元素应该向左或向右滑动，以便为新元素留出足够的空间，而不是跳跃。

我希望对 CSS 过渡有类似的效果，但对于所有 DOM 过渡。

* {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

是否有一个项目可以做到这一点或者通过 jQuery 或 JS 处理该问题的简单方法？

感谢您的时间和帮助。

Answer 1

基于@John S的回答，我编写了一些代码，效果很好:

HTML

<div class="choosen_tags_holder"></div>

CSS

.choosen_tags_holder span {
    padding: 0 8px;
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
}

JS

/* ===== REMOVES THE CLICKED ELEMENT FROM THE CONTAINER ===== */
function removeFromTagContainer(liElement) {
    $('.choosen_tags_holder span').each(function (e) {
        if ($(this).html() === liElement.next().html()) {
            $(this).animate({ width: 0 }, '500');
            $(this).animate({ padding: 0 }, '100');
            removeContent($(this));
        }
    }); 
}

/* ===== ADDS THE CLICKED ELEMENT TO THE CONTAINER ===== */
function addToTagContainer(liElement) {
    var $span = $('<span>'+liElement.next().html()+'</span>').hide().prependTo(choosenTagsContainer);
    var width = $span.width();
    $span.css({ width: 0 }).show().animate({ width: width }, '500');
} 

它工作时的样子如何？这里:http://dev.choozi.de/slide/tags.php

它不是像我的问题中的 CSS 代码那样的通用解决方案，但它确实可以解决大多数添加和动画 DOM 元素的问题。

非常感谢您的帮助!