的DOM元素移動的動畫，因爲增加一個元素

我有一個JS腳本，還增加了一個跨度元素放入一個div。由於div具有文本對齊：中間;現有的跨度在新跨度被附加或移除後立即向左或向右「跳躍」。

是否有任何方式如何動畫元素的跳動，而不是每次添加元素時都不在容器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處理該問題的簡單方法的項目？

感謝您的時間和幫助。

來源

2015-09-05 thenobol

下面是使用JQuery進行動畫處理的刺：[jsfiddle]（http://jsfiddle.net/7nqz4bL3/）。我試着做類似於CSS轉換的東西，但我對它們並不熟悉。 –

基於@約翰小號的答案嗯，我做了一些代碼，至極是相當不錯的：

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

IT不是像我的問題的CSS代碼一般的解決方案，但它確實適用於添加和動畫DOM元素的大多數問題。

非常感謝您的幫助！

來源

2015-09-06 11:54:14 thenobol

的DOM元素移動的動畫，因爲增加一個元素

回答

相關問題