我需要翻譯多個div在彼此的頂部，使每個層滑動away.I使用animate.css來動畫和使用jquery來確定何時動畫結束並添加一個類到容器，使它隱藏，因此它不會增加頁面寬度。但不管頁面寬度是否仍然增加。div翻譯增加頁面寬度

我也想循環動畫。

HTML：

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

CSS：

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; 
}

JQuery的：

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

來源

2015-11-23 Rakesh Renzous

您是否允許其他人通過發佈一些更真實的HTML來重新創建您的問題？例如，該問題可能與父HTML元素有關。 –

請創建一個小提琴嗎？ –

@GerritBertier z-index 4的div必須滑過下面的div，這樣才能看到它。但在滑動時增加頁面寬度 –

添加的容器/包裝到你想要的動畫，並禁用它overflow的元素，所以它不會放大。

小提琴：http://jsfiddle.net/e62m6hfn/

HTML

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

CSS

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; 
}

更新

我在動畫循環中創建了一個小提琴（獨立於您想要動畫的項目數量）。

該代碼可能不是最乾淨的，但它的工作原理。

撥弄循環：http://jsfiddle.net/e62m6hfn/2/

HTML

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

CSS

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; 
}

jQuery的

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)); 
    }); 
});

來源

2015-11-23 12:38:25

謝謝它的作品。但是有可能循環這個嗎？ –

你可以使用jQuery來循環播放動畫。我想你想移出'.test1'並再次顯示'.test'？ –

是的，這就是我想要做的 –

嘗試增加overflow: hidden;到html, body {}。

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

來源

2015-11-23 12:38:15

非常感謝。可以讓我循環一遍，就好像兩個翻譯後我可以先重新出現然後再做同樣的事情。 –

div翻譯增加頁面寬度

回答

更新

相關問題