Складная карта Bootstrap 4 — изменчивая анимация

Я использую Bootstrap 4 и создал карту с .card-header и .card-block следующим образом:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

Я хочу иметь возможность щелкнуть заголовок карты, чтобы переключить блокировку карты. Я пытался использовать механизм сворачивания Bootstrap (вы заметите data-toggle="collapse" в заголовке карты). Это работает, но анимация очень прерывистая.

Я не могу понять, почему. Вот пример использования codepen.


javascript css twitter-bootstrap bootstrap-4 twitter-bootstrap-4
person jbyrd    schedule 10.11.2015    source источник

Ответы (3)


arrow_upward
14
arrow_downward

Проблема задержки:

Проблема заключается в классе .card-block, который по умолчанию добавляет отступ 1,25rem.

Если вы удалите блок карты класса из блока div#test-block и создадите внутри блок div с блоком карты класса (чтобы вы сохранили требуемое заполнение), проблема задержки исчезнет.

Проблема с кликами:

В вашем #test-блоке нет класса с коллапсом, поэтому сначала его нужно добавить. Вот почему это работает со второй попытки.

Если вы добавите класс с именем «collapse» в div#test-block, ваша проблема с задержкой исчезнет.

Если вы хотите, чтобы панель открывалась по умолчанию, добавьте также класс «in». например «ввалиться».

У меня есть следующий код:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-block">
            card block
        </div>
    </div>
</div>
person Timon    schedule 10.11.2015
comment
Хорошее решение. Также было бы полезно добавить класс collapse in, чтобы блок был уже открыт по умолчанию. - person Rashad Ibrahimov; 10.11.2015
comment
Это сделало это! Я установил для .card-block значение padding: 0 и добавил div.card-block-content, чтобы вместо этого вставлять отступы. - person jbyrd; 10.11.2015
comment
@RashadIbrahimov - если вы хотите, чтобы он открывался по умолчанию, да, правда. В моем случае на самом деле нет. - person jbyrd; 10.11.2015

arrow_upward
3
arrow_downward

Вероятно, поэтому bootstrap 4 все еще находится в альфа-версии. Вероятно, это будет исправлено.

Единственное решение, которое я нашел, это свернуть ваш card-block, добавив класс collapse, а затем удалив его отступы с помощью css:

.card-block{ padding:0; }
person Nvan    schedule 10.11.2015

arrow_upward
0
arrow_downward

Блок #test имеет состояние по умолчанию:

    <div id='test-block' class='card block'>

При нажатии один раз класс меняется на расширенную версию

    <div id='test-block' class="card-block collapse in" aria-expanded="true">

Таким образом, div не имеет правильного состояния по умолчанию. Измените состояние, чтобы отразить collapse in и aria-expanded=true, и для этого потребуется всего 1 щелчок.

Не понимаю, почему анимация тормозит. :(

person Halycon    schedule 10.11.2015