Question

我正试图让内容在屏幕上移动，但是我在使用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的版本时看到问题。

感谢您的所有帮助和建议。

Answer 1

首先在页面容器中添加一个类项

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

动画div作为CSS3中的页面

1 个答案: