2016-06-22 3 views
0

어린이 (녹색)가 부모 (빨간색)보다 넓게 디자인 된 접을 수있는 패널이 있습니다. 자식에는 테두리가 있고 :: before 및 :: after를 통해 추가 된 아이콘이 있기 때문에 전체 패널이 축소되면 부모의 애니메이션이 완료 될 때까지 큰 상태를 유지합니다.부모가 오버플로가 숨김으로 설정된 경우 하위 요소의 너비를 변경하십시오.

부모의 오버플로를 숨김으로 변경하면 이러한 성가신 줄이 화면에 표시되는 것을 피할 수 있습니다. 불행히도이 클립은 어린이의 스타일을 지정하는 것이므로 의도 한대로 요소를 볼 수 없습니다.

오버플로가있는 부모를 숨기고 부모의 너비를 초과하는 너비를 허용 할 수있는 방법이 있습니까? 어떤 속임수? 당신은 수평으로 무너지고 같은

container with overflow set to hidden

+1

하지만 그것은 '오버플로 : 숨겨진'기능이 무엇입니까 (부모를 초과하면 자녀를 잘라냅니다). 실제로 달성하고자하는 것은 무엇입니까? – LGSon

+0

jsfiddle을 만들 수 있습니까? – Ricky

+0

html/CSS를 제공하면 도움이 훨씬 쉬울 것입니다. – LGSon

답변

1

그것은 보이는 문제는 폭이 새로운 가치로 전환 멈출 때까지 요소가 새로운 폭으로 조정을 계속한다는 것이다.

올바른 경우 패널을 transform: scaleX(0);으로 접으려면 width을 사용으로 변경해야 할 수 있습니다. 너비가 0이 된 후에 자식 요소를 다시 렌더링하고 요소를 볼 수 있어야합니다.

+0

부모님의 애니메이션이 끝날 때까지 어린이 스타일을 보이지 않게하기 위해 Nikhil이 돈을 쏟아 줘서 고맙습니다. 부모님의 전환 대신 변형을 사용해야합니다. 좋은 팁. 감사! –

관련 문제