当兄弟被删除时，如何让HTML div动画变得平滑过渡？

我正在处理我的页面上的CSS/JS动画。

的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

@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.8s），而不是立即发生，因为现在正在进行。

有人可以建议一个优雅的方式来完成这个序列？

谢谢！

来源

2017-10-07 bodacious

我一直在看你的有趣的问题，我想我有一个答案，jQuery的动画，你可以在这里看到引用 - http://api.jquery.com/animate/

原因您的问题是，根据您的CSS的位置，直到项目被删除，它占用了该内容，因此当它被删除时，另一个div会自动占用空间。

因此，我可以看到的最好方法是修改被删除的div的高度。我添加了另一个案例陈述来实现这一点。 “ 壳体2： $（” .mock松请求：第一 “）.animate（{ ”高度“： ”0像素“}， ”慢“）; 返回步骤+ = 1; ”

因此，在降低其高度时，下面的div会显示顺利滚动。 “缓慢”的使用只是我的游戏引擎建设日的最爱，但正如API文档所述，您可以指定毫秒

不幸的是，jSFiddle不包含正确的jQuery版本，示例显示我的工作示例，但是我已经能够在本地文件上按预期工作。

来源

2017-10-08 00:38:27

当兄弟被删除时，如何让HTML div动画变得平滑过渡？

回答

相关问题