CSS Grid - переход для добавления / удаления карт - PullRequest
Новая
       10

CSS Grid - переход для добавления / удаления карт

0 голосов
/ 13 сентября 2018

Я создал скрипт для динамического добавления и удаления карточек из сетки 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.После удаления карты мне нужно обновить их идентификаторы, которые похожи на их позиции (1-8).Обратите внимание, что часто добавление карт не ограничено (видны только 8).

По эстетическим соображениям я хочу использовать переходы / анимацию, когда карты удаляются или добавляются в сетку.К настоящему времени я не нашел решения.

Добавление новой карты: новая карта должна двигаться справа налево, пока не достигнет своей позиции в сетке.Извлечение карты. Исчезновение карты.Сетка должна «заполнять» себя, поэтому карты «за» удаленной карты также должны перемещаться справа налево на свои новые позиции.

...