Transition height with Javascript
Thu Oct 06 2022 12:33:18 GMT+0000 (UTC)
Saved by
@Kristi
#css
#javascript
//HTML
<section>
<div>
<p>
Some Text
</p>
</div>
</section>
<button id="toggle-button">Click Me</button>
//CSS
div {
overflow:hidden;
transition:height 0.3s ease-out;
height:auto;
}
//JS
function collapseSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// temporarily disable all css transitions
var elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function(e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = null;
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'false');
}
document.querySelector('#toggle-button').addEventListener('click', function(e) {
var section = document.querySelector('div');
var isCollapsed = section.getAttribute('data-collapsed') === 'true';
if(isCollapsed) {
expandSection(section)
section.setAttribute('data-collapsed', 'false')
} else {
collapseSection(section)
}
});
content_copyCOPY
Since we cannot transition height we can achieve the same with js
https://css-tricks.com/using-css-transitions-auto-dimensions/
Comments