Анимация высотой свойства :: HTML + CSS + JavaScript

Question

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

Скажите, что я хочу создать раскрывающееся меню или аккордеон.

Это мой HTML:

<div class="wrapper" onclick="toggle()"> 
    I want to be animated! 
    <div class="content"> 
    Was I revealed in a timely fashion? 
    </div> 
</div> 

Stylesheets:

.wrapper { 
    background: red; 
    color: white; 
    height: auto; 
    padding: 12px; 
    transition: 2s height; 
} 

.content { 
    display: none; 
} 

.content.visible { 
    display: block; 
} 

JavaScript:

function toggle() { 
    var content = document.getElementsByClassName('content')[0]; 

    var test = content.classList.contains('visible'); 

    test ? content.classList.remove('visible') : 
    content.classList.add('visible'); 
} 

Я пытаюсь достигнуть хорошего, плавную анимацию, когда мы переключаем состояние Контент. Очевидно, это не работает. Кто-нибудь может объяснить мне, почему это не работает и как это исправить? Большое спасибо.

Ссылка на JSFiddle.

Answer 1

Прежде всего, некоторые свойства CSS НЕ МОГУТ ПЕРЕХОДИТЬ, display является одним из них, кроме того, можно переходить только дискретные значения, поэтому height: auto тоже не может.

В вашем случае проблема с height: auto, а для этого есть несколько hacks, если вы просто показываете и скрываете вещи, почему бы не добавить и не использовать вместо этого jQuery?

$(".content").toggle("slow"); 

jsFiddle

--edit (без JQuery) -

Потому что это auto, что дает нам проблемы, мы можем использовать JavaScript, чтобы заменить auto со значением в пикселях, а затем использовать переход css обычно, если ваш контент не имеет прокрутки, мы можем легко принять это значение из свойства scrollHeight:

function toggle() { 
    var content = document.getElementsByClassName('content')[0]; 

    var test = content.classList.contains('visible'); 
    console.log(test); 

    if (test) { 
    content.classList.remove('visible') 
    content.style.height = "0px"; 
    } else { 
    content.classList.add('visible'); 
    content.style.height = content.scrollHeight + "px"; 
    } 
} 

Css

.wrapper { 
    background: red; 
    color: white; 
    height: auto; 
    padding: 12px; 
    transition: 2s height; 
} 

.content { 
    height: 0px; 
    display: block; 
    transition: 2s height; 
    overflow: hidden; 
} /* totally removed .content.visible */ 

jsFiddle