由于添加另一个元素而移动的元素的 DOM 动画答案

【问题标题】：DOM animation for elements moved because of adding another Element由于添加另一个元素而移动的元素的 DOM 动画
【发布时间】：2015-12-01 15:53:58
【问题描述】：

我的问题取决于以下情况：

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

有没有什么方法可以为元素的跳转设置动画，而无需在每次添加元素时在容器 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 处理该问题的简单方法？

感谢您的时间和帮助。

【问题讨论】：

这是一个使用 JQuery 制作动画的尝试：jsfiddle。我尝试用 CSS 过渡做类似的事情，但我对它们不太熟悉。

标签： javascript jquery animation dom elements

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

/* ===== 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 元素的大多数问题。

非常感谢您的帮助！

【讨论】：