アニメーションを使用して 2 つの Div を交換する方法

Question

div を大きなボックスとして表示し、他の 3 つの div をその下に小さなボックスとして表示したいプロジェクトがあります。小さなボックスをクリックすると、CSS トランジション効果を使用してサイズが変更され、 big box 位置を入れ替えて、動きやサイズの変更をスムーズにします。現在、jQueryを使用しようとしていますが、位置決めがまったく機能しません。これが私の現在の例です:

https://jsfiddle.net/v3pmhawj/1/

$(function () {
    let { 左: x1、上: y1 } = $('.full-size-card').offset()
    
    $('.inactive-sheets .card').on('click', function() {
        let { 左: x2、上: y2 } = $(this).offset()
        
        let curr = $('.full-size-card')
        diffX = x2 - x1 とします。
        diffY = y2 - y1 とします。
        
        $(this).css({
            左: -diffX、
            上: -diffY
        })
        $(this).addClass('フルサイズカード')
        
        curr.css({
            左: diffX、
            上: diffY
        })
        curr.removeClass('フルサイズカード')
    })
})

他のライブラリや他のテクノロジーに関する提案がある場合は、喜んで耳を傾けます。 DOM内でdivを移動できるようにしたいのですが、私が知る限り、それを行うと、(私が知っている)唯一の方法は削除して再作成することであるため、それらにCSSトランジションエフェクトを適用することはできません。 -DOM に要素のコピーを追加します。

Answer 1

トランジション効果を使用するだけで、アニメーション効果を簡単に作成できます。これを実現するには、コンテナの幅と高さ、および下部要素の上部と左の位置を定義する必要があります。

クリックすると、小さくなる要素のクラスと大きくなる要素のクラスを交換するだけです。

これは例を含むフィドルリンクです: https://jsfiddle.net/fkd3ybwx/210/

HTML

リーリー

CSSS

リーリー

JavaScript

リーリー