<p>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: </p> <p>https://jsfiddle.net/v3pmhawj/1/</p> <pre class="brush:php;toolbar:false;">$(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') }) })</pre> <p>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. </p>

<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>

.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;
}

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";
  });
});