자동 크기 조정 플렉스 박스 레이아웃에 CSS 전환 또는 자바 스크립트 애니메이션 추가

Question

.expands을 사용하는 디자인 패턴을 사용하여 .expanded 자동 크기 플렉스 박스 요소에 대한 하위 클래스를 .hidden 번 토글하려고합니다.

뭔가 같은 :

const expandClick = e => { 
    e.currentTarget.querySelectorAll('.expanded').forEach(child => { 
    child.classList.toggle('hidden') 
    }) 
} 

document.querySelectorAll('.expands').forEach(expandable => { 
    expandable.addEventListener('click', expandClick) 
}) 

https://jsfiddle.net/vpc8khq8/

내 내면의 내용이 display: none 속성을 잃게 때, 나는 약간의 바운스 함께 완화 높이를 싶습니다,하지만 난 방법을 아주 확실하지 않다 바닐라 CSS 전환 또는 JS의 핀치로 그걸 풀어 라.

는이 게시물 건너 온 : How can I transition height: 0; to height: auto; using CSS?

그러나 답변의 대부분은 더 간단하고 가벼운 솔루션보다 이상한 부작용을 초과 JS/CSS를 해킹처럼 보인다. 나는 날씬하고 뭔가를 사용하고 싶습니다, https://jsfiddle.net/cm7a9jr7/

const expandClick = e => { 
    $(e.currentTarget).children('.expanded').each(function() { 
    $(this).slideToggle('slow', 'swing', function() { 
     $(this).toggleClass('hidden') 
    }) 
    }) 
} 

$(() => $('.expands').on('click', expandClick)) 

을하지만 :

이것은 jQuery를 함께 트릭을 수행합니다. CSS에서 이것을 권장하는 라이브러리 또는 간단한 방법이 있습니까?

Answer 1

나는 그 (이상 고정 된 높이에 최대 높이를 변경하려면 숨겨진 섹션에 0으로 최대 높이를 설정하여 전환 효과를 얻을 수있는 디스플레이 아무도 사용하지의 https://jsfiddle.net/vpc8khq8/2/

하는 대신 바이올린을 업데이트했습니다 섹션은 공개 될 것입니다). 이 또한 부모 요소에 숨겨진 오버 플로우를 설정해야합니다 :

.expands{overflow: hidden;} 

section.hidden { 
max-height: 0; 
background: red; 
} 

section{ 
    transition: 1s cubic-bezier(0.35, 1.17, 0.39, -0.61); 
    max-height: 400px; 
    background: blue; 
} 

내가 정제의 비트와 함께 당신은 아마 더 나은 뭔가를 얻을 수 있지만, 바운스 효과를 얻을 수있는 반 괜찮은 입방 베 지어을 만들었습니다.

크롬 devtools를 열고 전환 아이콘을 클릭하면 여러 사전 설정 중에서 선택하고 커브 점을 이동하여 나만의 프리셋을 만들 수 있습니다. Devtools는 전환 미리보기를 표시하고 다시로드하지 않고도 테스트 할 수 있습니다. 그런 다음 큐빅 베 지어 코드를 다시 CSS에 복사하십시오.

숨겨진 확인란이 예제의 라인을 따라 일부 CSS 속임수를 사용하여 단계 더 당신이 어떤 JS없이이 모든 것을 달성 할 수 가져가 : https://codepen.io/mrosati84/pen/AgDry

방법 [의