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

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

非常感谢你的帮助！

由于添加了另一个元素

1 个答案: