Слайд + эффект затухания с использованием CSS-переходов

Я пытаюсь воспроизвести этот эффект с помощью CSS-эффектов или переходов.

Используя анимацию, я могу анимировать opacity, но только исчезают, а height (который должен контролировать слайд), похоже, не работает вообще:(

Самое близкое, что у меня есть, это использование javascript для установки временного класса для элемента, который я хочу анимировать, и к которому я применяю начальную непрозрачность. Но height тоже не работает. И, похоже, небольшая задержка при запуске анимации.

Есть другие идеи?

Поэтому я решил использовать решение, опубликованное в вопросе, о котором говорил Саймон: с помощью javascript я оборачиваю элемент, который хочу анимировать, в DIV-оболочку, к которой я применяю анимацию. Оболочка будет менять свою высоту от 0 до высоты содержимого DIV при каждом нажатии метки:

возиться здесь

Я знаю, что это требует некоторого JavaScript, но идея состоит в том, чтобы сделать анимацию в CSS, и это то, что он делает. И если JS отключен, тумблер все равно будет работать...

Источник

2 ответа

Решение

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

Источник

Я внес изменения в вашу JS Fiddle, я считаю, что это то, что вы хотите; пожалуйста, посмотрите это здесь.

Вы должны указать высоту в div изначально (0) и не забудьте переполнение:hidden; так что контент не "выплывает" из div. Тем не менее, вам все еще понадобится jQuery / Javascript, чтобы переключать класс, но это означает, что требуется гораздо меньше Javascript. (Я переключил класс "change", который вы увидите на этой скрипке)

input {
   display:none;
}
label {
    display:inline-block;
}
div {
    white-space: pre;
    background: #eee;
    color: #333;
    overflow:hidden;
    height:0;
    opacity:0;
    -moz-transition:height 1s opacity 1s;
    -webkit-transition:height 1s opacity 1s;
    -o-transition:height 1s opacity 1s;
    -ms-transition:height 1s opacity 1s;
    transition:height 1s, opacity 1s;
}
.changed {
    height:200px;
    opacity: 1;
}

Я добавил несколько префиксов вендора в CSS-код перехода, поскольку я не уверен, какой браузер вы будете использовать, и я использую Firefox, поэтому мне нужен префикс -moz- lol:)

Единственная проблема, которую я вижу, это то, что height:auto или height:100% не анимируется, поэтому вам нужно будет указать ems или px... Если это будет проблемой (например, если контент будет быть динамичным), я бы посоветовал использовать jQuery для анимации высоты.

Источник
Другие вопросы по тегам