Bootstrap 4 Складная Карта-Прерывистая Анимация

Я использую Bootstrap 4 и создал карту с a .карточка-заголовок И.карточный блок вот так:

<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.

12
bootstrap-4 css javascript twitter-bootstrap twitter-bootstrap-4

3 ответов

лага проблема:

проблема .карточный блок class, он добавляет заполнение 1.25 rem по умолчанию.

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

Clicky проблема:

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

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

Если вы хотите, чтобы панель была открыта по умолчанию, добавьте класс "in". например, "collapse 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>
8

вероятно, поэтому bootstrap 4 все еще находится в alpha. Это, вероятно, будет исправить.

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

.card-block{ padding:0; }
2

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

    <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 щелчок.

Я понятия не имею, почему анимация рывками. :(

0