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

Question

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

Using animations Я могу оживить opacity, но только FadeIn, и (который должен управлять слайд), кажется, не работает вообще :(

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

Любые другие идеи?

---

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

fiddle here

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

Answer 1

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

Answer 2

Я внес изменения в ваш JS Fiddle, я верю, что это то, что вы хотите; please see it here.

Необходимо указать высоту на div первоначально (0) и не забывать переполнение: скрыто; так что контент не «выплескивается» из div. Однако вам нужно будет jQuery/Javascript для переключения класса, но это означает, что требуется значительно меньше Javascript. (Я переключен класс «изменение», который вы видите на этой скрипке)

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 Собственость, как я не уверен, какой браузер вы будете использовать и I» m на firefox, поэтому мне нужен -moz-префикс lol :)

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