我试图让内容在屏幕上移动,但是我在使用Bootstrap的传送带移动文本时遇到了麻烦。
我正在制作动画,但div彼此重叠,因此它们在自己的位置内外动画,而不是在同一位置内外动画。
这是CSS
/* Home and about pages */
#about-page {
transform: translateX(200%);
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
.slideInLeft {
transform: translateX(-200%);
animation: slideInLeft 1s forwards;
}
.slideOutRight{
transform: translateX(200%);
animation: slideOutRight 1s forwards;
}
.slideInRight {
animation: slideInRight 1s forwards;
}
/* Slide in from the left */
@keyframes slideOutLeft {
0% { transform: translateX(0%); }
100% { transform: translateX(-200%); }
}
@keyframes slideInLeft {
0% { transform: translateX(-200%); }
100% { transform: translateX(0%); }
}
@keyframes slideOutRight {
0% { transform: translateX(0%); }
100% { transform: translateX(200%); }
}
@keyframes slideInRight {
0% { transform: translateX(200%); }
100% { transform: translateX(0%); }
}
由以下JavaScript触发
$(function() {
// Go to home
$("#home-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#about-link').removeClass('active');
// Slide in homepage
$('#home-page').removeClass('slideOutLeft');
$('#home-page').addClass('slideInLeft');
// Slide out about page
$('#about-page').removeClass('slideInRight');
$('#about-page').addClass('slideOutRight');
$('#about-page').addClass('hidden');
});
// Go to about slide
$("#about-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#home-link').removeClass('active');
// Slide out homepage
$('#home-page').removeClass('slideInLeft');
$('#home-page').addClass('slideOutLeft');
$('#home-page').addClass('hidden');
// Slide in about page
$('#about-page').removeClass('slideOutRight');
$('#about-page').addClass('slideInRight');
});
});
您可以在测试网站here的版本中看到此问题。
感谢您的所有帮助和建议。
最佳答案
首先在页面容器中添加一个类项
<div class="inner cover">
<div id="home-page" class="item">
<!-- content -->
</div>
<div id="about-page" class="item">
<!-- content -->
</div>
</div>
在您的CSS中添加此块
.inner.cover {
position: relative;
overflow: hidden;
height: 200px;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
关于javascript - 动画div以在CSS3中充当页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35401353/