附加元素的加入效果

This is the fiddle。有一個列表組。通過點擊「添加」按鈕，彈出窗口會出現在有「創建」按鈕的地方。點擊「創建」按鈕後，樣本列表項將添加到列表組中的「添加」按鈕之前。附加元素的加入效果

現在，我想要一些效果，以便用戶可以瞭解添加創建的列表項的位置。所以，我想在添加的元素中添加不同的顏色，並像一樣平滑消失不同的顏色。這就是爲什麼在追加時，我添加了一個名爲.temp的新類並對其進行了設置。所以，添加「創建列表」後，它看起來不同。現在，我怎樣才能立即刪除.temp課程（也許在2/3秒內）並且流暢呢？

來源

2014-12-05 user1896653

第二的2/3後取出，很容易：http://jsfiddle.net/TrueBlueAussie/hfof316a/3/

$('body').on('click', '.create-list', function() { 
    var $element = $('<a href="#" class="list-group-item temp" data-toggle="modal" data-target="#listPopup"> Created List <span class="glyphicon glyphicon-remove-circle pull-right remove"></span> </a>'); 
    $('.add').before($element); 
    setTimeout(function(){ 
     $element.removeClass("temp"); 
    }, 666); 
});

您還需要設置的項目（不與TEMP）的過渡：

http://jsfiddle.net/TrueBlueAussie/hfof316a/6/

來源

2014-12-05 17:15:56

在這裏我要使用CSS過渡？我已經在.temp類中使用過它。 – user1896653 2014-12-05 17:23:16

@ user1896653：Sorted ...轉換需要應用於CSS中的非'.temp'項目。 – 2014-12-05 17:30:49

是的，它現在工作！謝謝 – user1896653 2014-12-05 17:34:34

在一段時間後刪除temp類：

setTimeout(function() { 
    $(".temp:first").removeClass("temp"); 
}, 1000);

並添加到list-group-item類的轉換而不是temp類（因爲它在一段時間後會被刪除）。

.list-group-item { 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
}

See updated fiddle here.

來源

2014-12-05 17:29:06 Hiral

完美！謝謝 – user1896653 2014-12-05 17:34:19

@ user1896653歡迎:) – Hiral 2014-12-05 17:36:48

附加元素的加入效果

回答

相關問題