Question

我正在为我的网络应用程序使用bootstrap 3，而且我正在遇到并发布。

我的导航栏包含在容器div中，我的主要内容包含在与导航栏相邻的容器div中，如下所示：

<body>
    <div class="container">
        //Navbar stuff
    </div>
    <div class="container">
        //Navbar stuff
    </div>
</body>

我在正文内容上有一个动画，可以在转换到新屏幕时将所有内容从屏幕上滑出。为此，我将左侧属性设置为屏幕外的动画。

从我可以收集的信息来看，这会导致身体宽度超出正常大小，这导致我的导航栏在动画期间受到内容位置的影响。

有没有办法在不增加主体宽度的情况下实现滑动动画，这样我的导航栏在动画过程中不会被移动？

编辑：

为了阐明我是如何制作动画的，我正在使用CSS3动画关键帧，并将该类应用于我正在滑动屏幕的元素。这是做这个的LESS

@animation-duration: 300ms;
@animation-timing-function: ease-in-out;
@animation-fill-mode:forwards;
@animation-iteration-count: 1;
.slide-in-right{
    animation-name: slideInRight;
    animation-duration:@animation-duration;
    animation-timing-function: @animation-timing-function;
    animation-fill-mode: @animation-fill-mode;
    animation-iteration-count: @animation-iteration-count;
}
.slide-out-right{
    animation-name: slideInRight;
    animation-duration:@animation-duration;
    animation-direction: reverse;
    animation-timing-function: @animation-timing-function;
    animation-fill-mode: @animation-fill-mode;
    animation-iteration-count: @animation-iteration-count;
}
.slide-in-left{
    animation-name: slideInLeft;
    animation-duration: 300ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

}
.slide-out-left{
    animation-name: slideInLeft;
    animation-direction: reverse;
    animation-duration:@animation-duration;
    animation-timing-function: @animation-timing-function;
    animation-fill-mode: @animation-fill-mode;
    animation-iteration-count: @animation-iteration-count;
}

@keyframes slideInRight{
    0%{
        position:relative;
        left: 150%;
    }
    100%{
        position:relative;
        left:0%;
    }
}

@keyframes slideInLeft{
    0%{
        position:relative;
        left: -150%;
    }
    100%{
        position:relative;
        left:0%;
    }
}

Answer 1

如果您使用transform: translateX(-100%);（其中-100%是您必须做的任何事情，请将其移出屏幕），它不应影响身体宽度。

此外，使用position: absolute; left: -100%;（再次，-100%是您在屏幕上移动元素所需要做的任何事情），身体宽度也不应受到影响。

在不增加体宽的情况下将DOM元素移出屏幕

1 个答案: