シャッフルをアニメーション化するカードゲームを作成しています。
テーブルに 5 枚のカードがあるとします。
A B C D E
カードを 1 枚取り、新しい位置に挿入する機能が必要です。たとえば、カードを位置 1 にinsert(D, 1)挿入すると、次のようになります。D
A D B C E
私は現在、フレックスボックスを使用してこれを簡単に行っています。 css 属性を使用して、各 div の順序を簡単に設定できますorder。ただし、flexbox はアニメーションをサポートしていません。Dをアニメーション化して、すべてのカードの上に移動し、 と の間に挿入Aできるようにしたいと考えていBます。
div/カードをドラッグできるソリューションを見てきましたが、それは私が望んでいるものではありません。シャッフルの各ステップをプログラムで表示したい。次のようにアニメーションを「ハードコード」するソリューションも見ました:http: //jsfiddle.net/uNv8C /しかし、私は任意の数のカードを持つことができます(合理的な数52)
どんな指針も非常に役に立ちます。jquery sortable を見ましたが、ここで使用する方法がわかりませんでした - ここで使用できますか?