JavaScript - アニメーションの表示と非表示を切り替えるための良い解決策はありますか?

Question

＃＃＃例＃＃＃

このアニメーションと同じ効果です。最初はpが非表示になっています。ボタンをクリックすると表示され、アニメーション効果があります。非表示の場合も同様です。しかし、明らかに複雑に書きすぎました。もっと簡単な解決策 (サードパーティのライブラリを使用しない) はありますか?

Answer 1

トランジションを使ってみる:
デモ

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で実装できますか?

リーリー