Блог

Я пытаюсь создать переход по максимальной высоте с относительной единицей измерения (чтобы этот CSS можно было повторно использовать в любом месте).

Я добавил POC ниже. Кнопка переключения просто добавляет или удаляет класс, который задает максимальную высоту и имеет переход. Этот пример не работает, но он задерживается на время перехода (но только при удалении переключенного класса).

Поэтому я задаюсь вопросом, почему:

1. Он не показывает анимацию. Я знаю, что для максимальной высоты нужна точка отсчета. Но ссылка на что?
2. Если вы дадите всему фиксированную единицу: Анимация будет работать, но только в одном направлении. Это почему?

 $( document ).ready(function() {   $('button').click(function() {  $('div').toggleClass('collapsed');  }); }); 

 html {  height: 100%;  max-height: 100px; }  div {  border: solid 2px pink;  max-height: 100%;  transition: max-height 0.5s ease;  overflow: hidden;  height: 100px; }  div.collapsed {  max-height: 0;  transition: max-height 0.5s ease; } 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="collapsed"gt;  Some text lt;/divgt;  lt;buttongt;Toggle classlt;/buttongt; 

Поскольку вы используете Jquery, вы можете легко использовать slideToggle эффект. удалите collapse класс и добавьте display: none в div с height: 100px

Затем вы можете использовать slideToggle в Jquery для переключения отображения элемента div.

 $( document ).ready(function() {   $('button').click(function() {  $('div').slideToggle('slow')  }); }); 

 div {  border: solid 2px pink;  display: none;  height: 100px; } 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;divgt;  Some text lt;/divgt;  lt;buttongt;Toggle classlt;/buttongt;