tt9*_*tt9 0 css animation css3
我正在使用bootstrap 3作为我的Web应用程序,我正在遇到并发布.
我的导航栏包含在容器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%;
}
}
如果您使用transform: translateX(-100%);(-100%无论您需要做什么来将其移出屏幕),它都不应影响体宽.
此外,使用position: absolute; left: -100%;(再次,-100%无论你需要做什么来移动屏幕上的元素),身体宽度也不应受到影响.