CSS网格-用于添加/移除卡的过渡

Question

我创建了一个脚本来动态添加和删除CSS网格中的卡。看看：https://codepen.io/michaelkonstreu/pen/ZMRQaE

使用JS实现添加和删除卡：

// Add new card
function addCard(card) {
    card.id = _cards.length + 1;
    _cards.push(card);
    _$main.html('');
    for (let i = 0; i < _cards.length; i++) {
        drawCard(_cards[i]);
    }
}

// Remove card
function removeCard(id) {
    let cardRemoved = false;
    $('#' + _idPrefix + id).remove();
    for (let i = 0; i < _cards.length; i++) {
        if (_cards[i].id === id) {
            _cards.splice(i, 1);
            cardRemoved = true;
            break;
        }
    }
    if (cardRemoved) {
        // New IDs and redrawing
        _$main.html('');
        for (let i = 0; i < _cards.length; i++) {
            _cards[i].id = i + 1;
            drawCard(_cards[i]);
        }
    }
}

// Draw card
function drawCard(card) {
    let buildStr = '';
    buildStr += '<div class="grid-container ' + card.size + '" id="' + _idPrefix + card.id + '">';
    buildStr += '<div class="grid-item ' + card.color + '">';
    buildStr += '<div class="card-text">' + card.title + '</div></div></div>';
    _$main.html(_$main.html() + buildStr);
}

卡存储在全局数组_cards中。取出卡后，我需要更新其ID（类似于其位置（1-8））。请注意，添加卡通常没有限制（仅显示8张）。

由于美学原因，我想在卡片被移除或添加到网格时使用过渡/动画。到目前为止，我还没有找到解决方案。

添加新卡：新卡应从右向左移动，直到到达网格中的位置。 取出卡：使卡褪色。网格应“填满”自身，因此，已移除的卡“之后”的卡也应从右向左移动到新位置。