형제가 제거 될 때 HTML div를 애니메이션으로 부드럽게 전환하려면 어떻게해야합니까?

Question

달성하고자하는 것 :

내 페이지의 CSS/JS 애니메이션 작업 중입니다.

바이올린 =>https://jsfiddle.net/hngz8rq4/

되는 HTML

<div class="container"> 
    <div class="mock-requests"> 
    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 1</small> 
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 2</small> 
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 3</small>  
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 4</small>  
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 5</small> 
    </div> 
    </div> 
</div> 

JS

var mockRequests; 

mockRequests = (function() { 
    var animationStep0, animationStep1, animationStep2, callNextStep, init, itemHeight, startTimer, step, timeDelay, timer; 
    timer = null; 
    step = 0; 
    timeDelay = 1600; 
    itemHeight = 0; 
    init = function() { 
    if (document.querySelector('.mock-request')) { 
     $(".mock-request").addClass('animated'); 
     itemHeight = $('.mock-request:first').css('height'); 
     return startTimer(); 
    } 
    }; 
    startTimer = function() { 
    return timer = setInterval(callNextStep, timeDelay); 
    }; 
    animationStep0 = function() { 
    $('.mock-request:first').addClass('checked'); 
    return step += 1; 
    }; 
    animationStep1 = function() { 
    $('.mock-request:first').addClass('zoomOutLeft'); 
    return step += 1; 
    }; 
    animationStep2 = function() { 
    console.log("Setting item height: " + itemHeight); 
    $('.mock-request.checked').removeClass('checked zoomOutLeft').remove().css({ 
     "height": itemHeight 
    }).appendTo('.mock-requests').addClass('zoomInBottom'); 
    return step = 0; 
    }; 
    callNextStep = function() { 
    return eval("animationStep" + step + "()"); 
    }; 
    return { 
    init: init 
    }; 
})(); 

$(document).on("turbolinks:load", mockRequests.init); 

CSS의

,174,

@charset "UTF-8"; 
body { 
    font-size: 16px; 
    color: white; 
} 
small { 
    position: absolute; 
    top: 1.8rem; 
    left: 1rem; 
    font-size: 0.5rem; 
} 
.mock-request { 
    position: relative; 
    height: 3rem; 
    border-color: white; 
    border-width: 3px; 
    border-style: solid; 
    border-radius: 4px; 
    width: 100%; 
    max-width: 320px; 
    margin: 1rem auto; 
} 
.mock-request:before { 
    position: absolute; 
    top: 0.6rem; 
    right: 1rem; 
    font-size: 1.2rem; 
    color: white; 
    font-family: "FontAwesome"; 
    content: "\f10c"; 
} 
.mock-request.checked:before { 
    content: "\f058"; 
} 

.mock-request-inner { 
    position: absolute; 
    top: 1rem; 
    left: 1rem; 
    height: 0; 
    width: 80%; 
    border-color: white; 
    border-width: 3px; 
    border-style: solid; 
    border-radius: 4px; 
} 
.container { 
    background-color: black; 
} 

내가 다시 만들고 싶은 효과는 iOS에서 스 와이프 - 삭제 효과와 유사합니다. 스택의 요소가 검사되고있는 것처럼 보이게 한 다음 왼쪽으로 스 와이프하여 제거합니다.

일단 항목이 제거되면 스택은 이전 첫 번째 항목을 대신하여 위로 올라 가야합니다.

이 시퀀스는 계속 반복됩니다.

효율성을 위해 나는 첫 번째 항목을 스택에서 가져 와서 스택 맨 아래에 다시 추가합니다.

문제 : 나는 스택에서 최상위 요소를 제거하면 순간

는, 그 나머지는 이전 형제의 자리를 차지할 점프. 나는이 전환이 지금하고있는 것처럼 천천히 (~ 0.8 초) 천천히 일어나기를 바란다.

누구나이 순서를 완료하는 우아한 방법을 제안 할 수 있습니까?

감사합니다.

Answer 1

나는 당신의 흥미로운 문제에서 찾고있다, 그리고 나는 대답을 생각 jQuery를 애니메이션은 여기를 참조 볼 수있는 - http://api.jquery.com/animate/

문제에 대한 이유를 당신의 CSS 위치를 기반으로, 그 때까지 항목이 제거되면 해당 내용을 차지하므로 다른 div가 자동으로 공간을 차지합니다.

그래서 내가 볼 수있는 가장 좋은 방법은 제거되는 div의 높이를 수정하는 것입니다. 이를 달성하기 위해 또 다른 사례 발표문을 추가했습니다. " 케이스 2 : $ (".mock 곡 요청 : 제 ") .animate ({"높이 ""0 픽셀 "},"느린 "); 복귀 단계 + = 1; "

그래서, 높이를 줄이면 아래 div가 부드럽게 위로 스크롤되는 것처럼 보입니다. "느린"사용은 제 게임 엔진 구축 일의 가장 좋아하는 것일 뿐이지 만 API 문서에서 알 수 있듯이 밀리 초를 지정할 수 있습니다

불행히도 jSFiddle에는 올바른 버전의 jQuery가 포함되어 있지 않습니다. 예제는 내 작업 예제를 보여 주지만 로컬 파일에서 예상대로 작동하도록 만들 수있었습니다.