Question

我正在尝试使用css3 / JQuery进行动画，同时单击侧栏，当前div向左滑动并消失，而另一个隐藏的div则有点像页面转换。

这就是我的ATM：fiddle

HTML：

<div id='wrap'>
 <header></header>
 <div id='content'>
     <div id='contentMenu'></div>
     <div id='page1'>
         <div id='left'></div>
         <div id='right'></div>
     </div>
     <div id='page2'></div>
 </div>
 <footer></footer>
</div>

CSS：

* {
   margin:0;
   padding:0;
}
html, body, #wrap {
   height:100%;
}
header {
   height:15%;
   background: #0080FF;
}
#content {
   width:100%;
   height:75%;
   min-height:75%;
}
#contentMenu {
   width:2%;
   height:100%;
   background:black;
   display:inline-block;
}
#page1 {
   width:97%;
   height:100%;
   display:inline-block;
   -webkit-transition:height 5s;
}
#page1 div {
   display:inline-block;
}
#left {
   width:50%;
   height:100%;
   background:#FF8000;
}
#right {
   width:40%;
   height:100%;
   background:grey;
   display:none;
}
#page2 {
   width:49%;
   height:100%;
   background:purple;
   display:none ;
}
footer {
   background: #58D3F7;
   height:10%;
   z-index:99;
}
.dis{
   display:inline-block !important;
}

脚本：

$('#contentMenu').click(function () {
   $('#page1').toggle('fast', 'swing', function () {
      $('#page2').toggleClass('dis'); 
    });
});

但是当隐藏的div具有可见性时，您可以在页脚中看到闪烁。

无论如何要消除这个？
如果我删除-webkit-transition:height 5s;，div从右上角到左下角动画（同时为toggle()动画高度，宽度和不透明度）是否可以禁用高度变化只是从右到左动画？
无论如何都要避免jQuery并使用纯css3来实现这个目标吗？

使用css动画实现相同的任何其他方法也将非常感激：）

Answer 1

在overflow: hidden上添加#content可以解决您的问题：

#content {
    overflow: hidden;
    width:100%;
    height:75%;
    min-height:75%;
}

（updated JSFiddle here）

Answer 2

我也喜欢溢出隐藏的想法。此外，你可以通过使用动画的CSS来摆脱大部分的jquery。使用transition将div放在div之外的overflow:hidden。然后将.active设置为您想要的位置。

如何消除这个JQuery / CSS3动画的闪烁

2 个答案: