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

Posted 2023-05-09

【中文标题】由于添加另一个元素而移动的元素的 DOM 动画

【英文标题】：DOM animation for elements moved because of adding another Element

【发布时间】：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 过渡做类似的事情，但我对它们不太熟悉。

【参考方案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 元素的大多数问题。

非常感谢您的帮助！