Как создать в AMP разборную конструкцию типа Bootstrap? - PullRequest
Новая
       50

Как создать в AMP разборную конструкцию типа Bootstrap?

0 голосов
/ 18 мая 2019

Я пытаюсь создать складной в AMP с гладкой анимацией, как Bootstrap.

Теперь я могу создать складной объект с переключением класса и настройкой некоторой высоты с помощью CSS, но если я сделаю это, я дам фиксированную высоту для всех складных объектов, а высота содержимого не будет одинаковой для всех. блок, я не могу дать высоту.

В JavaScript я мог рассчитать высоту содержимого и соответствующим образом анимировать высоту, но, поскольку мы не можем использовать JavaScript в AMP, есть ли способ сделать это?

Я пытался сделать это с помощью CSS. Я определил два класса: один скрывает содержимое, установив высоту в 0, а другой показывает содержимое, установив высоту в авто. Это работает, но у него не было никакой анимации. Однако, если я устанавливаю высоту в несколько пикселей вместо авто и добавляю немного CSS-перехода, это работает. Но я не хочу давать статическую высоту для всего блока. 

<!- Hidden -->
<div class="rich-text-block">
   <h3>Pathological Criteria</h3>
   <div class="richtext-content">If either is positive, diagnosis is definite (see Reference for exceptions)</div>
</div>

<!- Shown -->
<div class="rich-text-block shown">
   <h3>Pathological Criteria</h3>
   <div class="richtext-content">If either is positive, diagnosis is definite (see Reference for exceptions)</div>
</div>

.rich-text-block .richtext-content {
    overflow: hidden;
    transition: height 0.3s linear;
    height: 0;
}
rich-text-block.shown .richtext-content {
    height: auto;
}

Надеюсь, я достаточно ясен.

Заранее спасибо

1 Ответ

0 голосов
/ 28 мая 2019

Вы можете попробовать amp-accordion для вашего случая использования.

Приходя к вашей проблеме. Вы не можете перейти высоту со значением auto. Вы можете использовать max-height в transition и установить максимальную высоту на величину, превышающую высоту вашего бокса.

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

.rich-text-block .richtext-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s linear;
}
rich-text-block.shown .richtext-content {
    max-height: 50px;
}
...