私はこの機能を設定しようとしています (基本的に大きな四角 = あなたがいるもの + 2 つの状態の間のアニメーション)。デフォルトの状態は 2 つの状態の小さい方のサイズで 8 マスです (大きい方の状態 = クラスがアクティブ) テキスト領域は空です。
- ユーザーが任意の項目にカーソルを合わせる ->
- 正方形はより大きな状態にアニメーション化されます
- ホバーされた項目に関連付けられたテキストは、ホバー中に表示されます
- ユーザーがアイテムの外に出る ->
- テキストが消える
- 正方形はデフォルトの状態のサイズに戻ります
- ユーザーが x アイテムをクリック ->
- そのアイテムのテキストが新しいデフォルトになります
- 正方形はアクティブな状態のままです (大きいサイズ)
- ユーザーが y アイテムをクリック ->
- 前のアクティブなアイテムがアニメーションでデフォルトの状態に戻ります
- y 項目のテキストが新しいデフォルト テキストになる
- y アイテムはアクティブな大きなサイズの状態のままです
私はほぼそれを持っています.唯一の問題は、同じアイテムを2回クリックすると、アクティブなクラスが本来あるべきではないアイテムに固執してしまうことです. そこまでたどり着けない！
2 回目のクリックでは、何もしないか、デフォルトとして設定を解除できます (おそらく何も改善されません)。