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

我正在使用bootstrap 3作为我的Web应用程序,我正在遇到并发布.

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

    

        //Navbar stuff
    
    

        //Navbar stuff
    

我在主体内容上有一个动画,可以在转换到新屏幕时将所有内容从屏幕上滑下来.为此,我将左侧属性设置为屏幕外的动画.

从我可以收集到的,这导致身体宽度扩展超出它的正常大小,这导致我的导航栏在动画期间受到内容位置的影响.

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

编辑:

为了阐明我是如何做动画的,我正在使用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%;
    }
}

Michael Coke.. 6

如果您使用transform: translateX(-100%);(-100%无论您需要做什么来将其移出屏幕),它都不应影响体宽.

此外,使用position: absolute; left: -100%;(再次,-100%无论你需要做什么来移动屏幕上的元素),身体宽度也不应受到影响.

如果您使用transform: translateX(-100%);(-100%无论您需要做什么来将其移出屏幕),它都不应影响体宽.

此外,使用position: absolute; left: -100%;(再次,-100%无论你需要做什么来移动屏幕上的元素),身体宽度也不应受到影响.