我试图让内容在屏幕上移动,但是我在使用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/

10-09 15:08
查看更多