Я хочу эффект jQuery slideToggle, но хочу использовать переходы CSS3 для вызова графического процессора на устройстве iOS, чтобы переход был более плавным.
Как получить такой же эффект, как jQuery slideToggle, используя переходы CSS 3?
Ответ 1
Вы можете добиться этого, перейдя height
, padding
и border-width
. Вот пример:
$('.run-css').click(function() {
$('.cont').toggleClass('toggled');
});
.cont {
width: 100px;
height: 100px;
border: 1px #CCC solid;
background-color: #EEE;
padding: 5px;
-webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
}
.toggled {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
height: 0;
border-width: 0 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="run-css">CSS slideToggle</button>
<div class="cont">Toggle this div</div>
Ответ 2
Извините, но это не поддерживается CSS3, если вы не знаете точную высоту. Нет способа анимации между 0 и авто. Если вы знаете точную высоту, здесь вы можете генерировать некоторые коды перехода: http://css3generator.com/
Ответ 3
Правда, вы не можете анимировать между 0 и автоматической высотой, но вы можете фактически переключить максимальную высоту.
Переключить (через JS) между max-height: 0 и max-height: 1000px, и вы получите достигнутый результат, хотя это будет не так гладко, как функция jQuery slideToggle.
Соедините его с непрозрачностью, и оно выглядит довольно хорошо. Я настоятельно рекомендую использовать этот метод только на относительно коротких контейнерах, поскольку крупные могут создавать отрывистую анимацию.
Ответ 4
.container {
overflow-y: hidden;
max-height: 0;
transition: max-height 0.5s ease;
}
.container.open {
max-height: 1000px; /* approx */
}
Ответ 5
Я верю Animatable должен сделать трюк. Это платформа CSS Transitions, и хотя я не занимаюсь разработкой iOS, Ли Веро упоминает, что она тестирует ее на FF и Chrome для iOS.
Существуют и другие библиотеки анимации CSS, такие как move.js, которые используют переходы CSS и javascript.