検索

ホームページ  >  に質問  >  本文

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

###例###

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

阿神阿神2693日前1008

全員に返信(5)返信します

  • 漂亮男人

    漂亮男人2017-06-30 10:01:55

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

    返事
    0
  • 为情所困

    为情所困2017-06-30 10:01:55

    もっとシンプルなアイデアは次のとおりです:

    1. ブロックを隠す必要はありません。高さを0に設定するだけで非表示になります

    2. アニメーション効果を実現するにはtransitionを使用してください

    3. 使用する必要はありませんhiddenshow两个类名来控制,其实它就只有两种状态,所以可以认为无show隠すだけです

    4. また、show()hide()分开绑定,其实你这个按钮点一下是展开,再点一下隐藏,用一个toggle()表示状態を切り替えるだけで書く必要はありません

    コードに次のようにいくつかの変更を加えました:
    https://jsfiddle.net/boxsnake...

    返事
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-30 10:01:55

    リーリー

    返事
    0
  • 習慣沉默

    習慣沉默2017-06-30 10:01:55

    この問題はCSS3で解決できます(IEとの互換性が必要ない場合)

    返事
    0
  • 高洛峰

    高洛峰2017-06-30 10:01:55

    jqueryで実装できますか?

    リーリー

    返事
    0
  • キャンセル返事