javascript - 애니메이션을 표시하고 숨길 수 있는 좋은 솔루션이 있습니까?

Question

예

이 애니메이션과 같은 효과가 있습니다. p가 먼저 숨겨지면 버튼을 클릭하면 표시되고 숨겨지면 같은 효과가 나타납니다. 하지만 확실히 너무 복잡하게 작성했습니다. 더 간단한 솔루션이 있습니까(타사 라이브러리가 필요하지 않음)?

Answer 1

전환을 사용해 보세요:
demo

Answer 2

더 간단한 아이디어는 다음과 같습니다.

1. 블록을 숨길 필요는 없습니다. 높이를 0으로 설정하면 보이지 않습니다

2. 애니메이션 효과를 얻으려면 transition를 사용하세요

3. 사용할 필요가 없습니다hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show숨겨져 있을 뿐입니다

4. 또한 show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()디스플레이 상태만 전환하면 됩니다

라는 문구도 쓸 필요가 없습니다.

다음과 같이 코드를 일부 수정했습니다.
https://jsfiddle.net/boxsnake...

Answer 3

으아악

Answer 4

질문은 CSS3로 해결할 수 있습니다(IE와 호환될 필요가 없는 경우)

Answer 5

jquery로 구현할 수 있나요?

으아악