Jquery 翻译时的div增加了页面宽度

我需要将多个div一个接一个地转换，这样每个层都会滑开。我使用animate.css来进行动画，使用jquery来标识动画何时结束，并向容器添加一个类，这样它就隐藏了，因此不会增加页面宽度。但不管怎样，页面宽度仍然在增加

我还想循环动画

jsfiddle：

HTML:

JQuery：

$(document).ready(function(){
    $('.test1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function()
    {
        document.querySelector('.test1').classList.add("hide");
    });
});

尝试添加溢出：隐藏；到html，正文{}

---

将容器/包装器添加到要设置动画的元素并禁用其溢出，这样它就不会放大

小提琴：

HTML

使现代化 我创建了一个小提琴，其中动画循环与要设置动画的项目数无关

代码可能不是最干净的，但它可以工作

摆弄循环：

HTML

jQuery

---

你能允许其他人通过发布一些更真实的HTML来重新创建你的问题吗？例如，该问题可能与父HTML元素有关。请创建一个fiddle？@GerritBertier具有z索引4的div必须滑动到下面的div上，以便使其可见。但在滑动时，它会增加页面width@YoramdeLangen@RakeshRenzous好的，我认为HTML父元素在这里更相关，因此，我提出了解决方案。非常感谢。我是否可以在翻译完这两个之后像循环一样循环它？我可以让第一个重新出现，然后再执行相同的操作吗？我想你可以使用jQuery循环动画。我想你想移出.test1并再次显示.test？嘿，我要用循环代码更新我的答案，这不是最干净的，但它向你展示了一种方法。不过你可能想把它清理一下。

html,body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.test
{
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;

}

.test1
{
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;

}

.hide
{
    display: none;
}

$(document).ready(function(){
    $('.test1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function()
    {
        document.querySelector('.test1').classList.add("hide");
    });
});

html,body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

<div class="container">
    <div class="test animated"></div>
    <div class="test1 animated lightSpeedOut"></div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.test {
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}
.test1 {
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;
}
.hide {
    display: none;
}

<div class="container">
    <div class="test-animate  test"></div>
    <div class="test-animate  test1"></div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.test-animate {
    height: 100%;
    width: 100%;
    position: absolute;
}
.test {
    background-color: #323232;
}
.test1 {
    background-color: #01c8c8;
}
.bottom {
    z-index: -1;
}

function animate($el) {
    $el.addClass('animated  lightSpeedOut');
}

var elCounter = 0;

$(document).ready(function () {
    elCounter = $('.test-animate').length;
    animate($('.test-animate').eq(elCounter - 1));

    $('.test-animate').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        elCounter = (elCounter > 1) ? elCounter-1 : $('.test-animate').length;
        $('.test-animate').removeClass('bottom');
        $(this).addClass('bottom');
        $(this).removeClass('animated  lightSpeedOut');
        animate($('.test-animate').eq(elCounter - 1));
    });
});