Cлайд CSS Вверх и Вниз

Cлайд CSS Вверх и Вниз

Cлайд CSS Вверх и Вниз

Если можно избежать использования JavaScript для элементов анимации, конечно вы используете это. Это более эффективно, не требует рамок JavaScript для управления шагами, и иногда даже более элегантно. Один эффект, который трудно использовать на чистом CSS, сползание вверх и вниз, где содержание скрыто, когда «вверх» и раскрывается, когда «вниз». Причина сложности, вы не можете знать высоты содержимого. Однако есть способ сделать Cлайд CSS со скольжением вверх и вниз.

HTML

Эффект требует только один элемент, поэтому мы будем придерживаться этому:

<div class="slider">Cлайд CSS</div>

CSS

Несколько очевидных свойств: overflow-y и свойства CSS анимации:

.slider {
	overflow-y: hidden;
	max-height: 500px; /* максимальная высота */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

Теперь самое интересное: трюк, чтобы сделать высоту, это свойство max-height. Мы установили значение свойства по умолчанию, а затем создадим другой класс, чтобы установить max-height для 0, таким образом, переместив элемент:

.slider.closed {
	max-height: 0;
}

Данная анимация использует функцию cubic-bezier для синхронизации перехода вверх, хотя вероятно есть более научный метод для такой анимации. Теперь, единственное, необходимо сделать, это переключить замкнутый класс для скольжения элемента вниз!

Не идеально

Бывает случаи, когда высота элемента может быть 1000px или 100000px. В этом случае, данный метод в проигрыше, потому что элемент,  не фиксированная высота. В этом случае у вас есть два варианта. Первый признать поражение CSS. Второй измеряет высоту DIV с JavaScript правилом максимальной высоты, тогда анимация будет прекрасно измерятся.

Пример Cлайда CSS

<div style="height: 200px; width: 200px; border: 1px solid #ccc;">
		<div class="slider" id="slider">
			<p>Бла бла бла бла....</p>
		</div>
	</div>

	<button onclick="document.getElementById('slider').classList.toggle('closed');">Toggle slider</button>
.slider {
			overflow-y: hidden;
			max-height: 200px;

			-webkit-transition-property: all;
			-webkit-transition-duration: .5s;
			-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-moz-transition-property: all;
			-moz-transition-duration: .5s;
			-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-ms-transition-property: all;
			-ms-transition-duration: .5s;
			-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			transition-property: all;
			transition-duration: .5s;
			transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			background: pink;
			height: 200px; 
			width: 200px;
		}

		.slider.closed {
			max-height: 0;
		}

Blah blah blah blah blah….

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *