Bagaimana untuk menukar dua Div menggunakan animasi

Question

Saya mempunyai projek di mana saya mahu satu div muncul sebagai kotak besar dan tiga div lain muncul di bawah sebagai kotak kecil dan apabila anda mengklik pada kotak kecil ia akan menukar saiz menggunakan kesan peralihan css dan sejajar dengan kotak besar Tukar kedudukan untuk melancarkan pergerakan dan perubahan saiz. Pada masa ini saya cuba menggunakan jQuery tetapi kedudukannya tidak berfungsi sama sekali. Berikut ialah contoh semasa saya:

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

$(function () {
    biarkan { kiri: x1, atas: y1 } = $('.kad bersaiz penuh').offset()
    
    $('.inactive-sheets .card').on('click', function() {
        biarkan { kiri: x2, atas: y2 } = $(this).offset()
        
        biarkan curr = $('.kad bersaiz penuh')
        biarkan diffX = x2 - x1
        biarkan diffY = y2 - y1
        
        $(this).css({
            kiri: -diffX,
            atas: -diffY
        })
        $(this).addClass('kad bersaiz penuh')
        
        curr.css({
            kiri: diffX,
            atas: diffY
        })
        curr.removeClass('kad bersaiz penuh')
    })
})

Jika sesiapa mempunyai cadangan yang melibatkan perpustakaan lain atau teknologi lain, saya sedia mendengar. Saya mahu dapat mengalihkan div di dalam DOM, tetapi setakat yang saya tahu jika anda melakukannya, anda tidak boleh melakukan kesan peralihan css pada mereka kerana satu-satunya cara (yang saya tahu) adalah untuk mengalih keluar dan semula -tambah salinan elemen dalam DOM.

Answer 1

Anda boleh mencipta kesan animasi hanya dengan menggunakan kesan peralihan. Untuk mencapai ini, anda perlu menentukan lebar dan ketinggian bekas, serta kedudukan atas dan kiri elemen bawah.

Apabila klik, anda hanya menukar kelas elemen yang akan menjadi lebih kecil dan kelas elemen yang akan menjadi lebih besar.

Berikut ialah pautan biola dengan contoh: https://jsfiddle.net/fkd3ybwx/210/

HTML

<div class="card-container">
  <div class="card large">A</div>
  <div class="card small">B</div>
  <div class="card small">C</div>
  <div class="card small">D</div>
</div>

CSS

.card-container {
  position: relative;
}

.card {
  transition: all ease 1s;
  position: absolute;
  font-size: 24px;
  border: white 4px solid;
  box-sizing: border-box;
  cursor: pointer;
}

.small {
  width: 100px;
  height: 100px;
  background: blue;
  left: 0;
  top: 300px;
}

.small ~ .small {
  left: 100px;
  background: green;
}

.small ~ .small ~ .small {
  left: 200px;
  background: yellow;
}

.large {
  width: 300px;
  height: 300px;
  background: red;
  left: 0px;
  top: 0px;
}

JavaScript

const smallCards = document.querySelectorAll('.card');

smallCards.forEach((smallCard) => {
    smallCard.addEventListener('click', (event) => {
    const largeCard = document.querySelector('.large');
    
    largeCard.className = "card small";
    event.target.className = "card large";
  });
});