So tauschen Sie zwei Div mithilfe einer Animation aus

Question

Ich habe ein Projekt, bei dem ich möchte, dass ein Div als großes Feld und drei weitere Divs darunter als kleine Kästchen angezeigt werden. Wenn Sie auf ein kleines Kästchen klicken, ändert sich die Größe mithilfe eines CSS-Übergangseffekts und es wird daran ausgerichtet Die große Box Tauschen Sie die Positionen aus, um Bewegungen und Größenänderungen reibungsloser zu gestalten. Momentan versuche ich, jQuery zu verwenden, aber die Positionierung funktioniert überhaupt nicht. Hier ist mein aktuelles Beispiel:

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

$(function () {
    let { left: x1, top: y1 } = $('.full-size-card').offset()
    
    $('.inactive-sheets .card').on('click', function() {
        let { left: x2, top: y2 } = $(this).offset()
        
        let curr = $('.full-size-card')
        sei diffX = x2 - x1
        sei diffY = y2 - y1
        
        $(this).css({
            links: -diffX,
            oben: -diffY
        })
        $(this).addClass('full-size-card')
        
        curr.css({
            links: diffX,
            oben: diffY
        })
        curr.removeClass('full-size-card')
    })
})

Wenn jemand Vorschläge zu anderen Bibliotheken oder anderen Technologien hat, bin ich bereit, zuzuhören. Ich möchte in der Lage sein, die Divs im DOM zu verschieben, aber soweit ich weiß, können Sie in diesem Fall keinen CSS-Übergangseffekt auf sie anwenden, da die einzige Möglichkeit (die ich kenne) darin besteht, sie zu entfernen und erneut auszuführen -Fügen Sie eine Kopie des Elements im DOM hinzu.

Answer 1

您只需使用过渡效果就可以创建动画效果。为了实现这一点，您需要定义容器的宽度和高度，以及底部元素的顶部和左侧位置。

在点击时，您只需交换将变小的元素的类和将变大的元素的类。

这是一个示例的fiddle链接： 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";
  });
});