애니메이션을 사용하여 두 Div를 교체하는 방법

Question

한 div를 큰 상자로 표시하고 다른 세 개의 div를 아래에 작은 상자로 표시하려는 프로젝트가 있습니다. 작은 상자를 클릭하면 CSS 전환 효과를 사용하여 크기가 변경되고 큰 상자의 위치를 ​​바꿔서 움직임과 크기를 부드럽게 변경하세요. 현재 jQuery를 사용하려고 하는데 위치 지정이 전혀 작동하지 않습니다. 현재 예시는 다음과 같습니다.

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

$(함수 () {
    let { 왼쪽: x1, 위쪽: y1 } = $('.full-size-card').offset()
    
    $('.inactive-sheets .card').on('클릭', function() {
        let { 왼쪽: x2, 위쪽: y2 } = $(this).offset()
        
        curr = $('.full-size-card') 로 설정하세요.
        diffX = x2 - x1로 둡니다.
        diffY = y2 - y1로 둡니다.
        
        $(이).css({
            왼쪽: -diffX,
            상단: -diffY
        })
        $(this).addClass('풀 사이즈 카드')
        
        현재.css({
            왼쪽: diffX,
            상단: 다름
        })
        curr.removeClass('풀 사이즈 카드')
    })
})

다른 라이브러리나 다른 기술과 관련된 제안이 있으시면 듣고 싶습니다. 나는 DOM에서 div를 이동할 수 있기를 원하지만, 내가 아는 한 그렇게 하면 CSS 전환 효과를 수행할 수 없습니다. 왜냐하면 (내가 아는) 유일한 방법은 제거하고 다시 수행하는 것이기 때문입니다. - DOM에 요소의 복사본을 추가합니다.

Answer 1

전환 효과를 사용하여 간단하게 애니메이션 효과를 만들 수 있습니다. 이를 위해서는 컨테이너의 너비와 높이뿐 아니라 하단 요소의 상단 및 왼쪽 위치도 정의해야 합니다.

클릭하면 작아질 요소의 클래스와 커질 요소의 클래스를 간단히 바꿀 수 있습니다.

다음은 예시가 포함된 바이올린 링크입니다. https://jsfiddle.net/fkd3ybwx/210/

HTML

으아악

CSS

으아악

자바스크립트

으아악