Comment échanger deux Div en utilisant l'animation

Question

J'ai un projet dans lequel je veux qu'un div apparaisse comme une grande boîte et trois autres divs apparaissent ci-dessous sous forme de petites boîtes, et lorsque vous cliquez sur une petite boîte, elle changera de taille en utilisant un effet de transition CSS et s'alignera avec la grande boîte change de position pour faciliter les mouvements et les changements de taille. Actuellement, j'essaie d'utiliser jQuery mais le positionnement ne fonctionne pas du tout. Voici mon exemple actuel :

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

$(function () {
    let { gauche : x1, haut : y1 } = $('.full-size-card').offset()
    
    $('.inactive-sheets .card').on('click', function() {
        let { gauche : x2, haut : y2 } = $(this).offset()
        
        laissez curr = $('.full-size-card')
        soit diffX = x2 - x1
        soit diffY = y2 - y1
        
        $(ce).css({
            à gauche : -diffX,
            en haut : -diffY
        })
        $(this).addClass('carte pleine taille')
        
        curr.css({
            à gauche : diffX,
            en haut : diffY
        })
        curr.removeClass('carte pleine taille')
    })
})
Si quelqu'un a des suggestions concernant d'autres bibliothèques ou d'autres technologies, je suis prêt à les écouter. Je veux pouvoir déplacer les divs dans le DOM, mais pour autant que je sache, si vous faites cela, vous ne pouvez pas leur appliquer un effet de transition CSS car le seul moyen (à ma connaissance) est de les supprimer et de les réinstaller. -ajouter une copie de l'élément dans le DOM. 

Answer 1

Vous pouvez créer des effets animés simplement en utilisant des effets de transition. Pour y parvenir, vous devez définir la largeur et la hauteur du conteneur, ainsi que la position supérieure et gauche de l'élément inférieur.

Au clic, vous échangez simplement la classe de l'élément qui deviendra plus petit et la classe de l'élément qui deviendra plus grand.

Voici un lien avec un exemple : 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";
  });
});