Javascript 由于添加其他元素而移动的元素的DOM动画

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

我有一个JS脚本，它在div中添加了一个span元素；，一旦附加或删除新跨距，现有跨距将“跳跃”到左侧或右侧

是否有任何方法可以使元素的跳跃动画化，而不必在每次添加元素时在container div中的每个span元素的代码中手动计算它

你可以在这里看到我的问题：，当你点击一个标签时，其他人在上面的蓝色框中跳跃

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

对于CSS转换，我希望有类似的东西，但是对于所有DOM转换

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

有没有一个项目可以做到这一点，或者有一个简单的方法可以通过jQuery或JS来处理这个问题

---

感谢您的时间和帮助。

根据@John的回答，我编写了一些代码，它运行得非常好：

HTML

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

JS

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

/* ===== 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');
} 

/*====从容器中删除单击的元素=====*/
函数removeFromTagContainer（liElement）{
$（'.choosen_标记_支架span'）。每个（函数（e）{
if（$（this.html（）==liement.next（）.html（））{
$（this.animate（{width:0}，'500'）；
$（this.animate（{padding:0}，'100'）；
删除内容（$（此））；
}
}); 
}
/*====将单击的元素添加到容器=====*/
函数addToTagContainer（liElement）{
var$span=$（''+liement.next（）.html（）+''）.hide（）.prependTo（choosenTagsContainer）；
var width=$span.width（）；
$span.css（{width:0}）.show（）.animate（{width:width}，'500'）；
} 

它工作时的样子如何？在这里：

它不像我问题中的CSS代码那样是一个通用的解决方案，但它确实适用于添加DOM元素和设置DOM元素动画的大多数问题

---

所以非常感谢你的帮助

这里有一个使用JQuery制作动画的尝试：。我试着用CSS转换做一些类似的事情，但我对它们不太熟悉。