トランジション効果を使用するだけで、アニメーション効果を簡(jiǎn)単に作成できます。これを?qū)g現(xiàn)するには、コンテナの幅と高さ、および下部要素の上部と左の位置を定義する必要があります。
クリックすると、小さくなる要素のクラスと大きくなる要素のクラスを交換するだけです。
これは例を含むフィドルリンクです: https://jsfiddle.net/fkd3ybwx/210/
HTML
CSSS
JavaScript