如何消除此 JQuery/CSS3 动画中的闪烁答案

【问题标题】：How to eliminate the flicker from this JQuery/CSS3 Animation如何消除此 JQuery/CSS3 动画中的闪烁
【发布时间】：2014-04-21 20:18:59
【问题描述】：

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

这是我的自动取款机：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 动画实现相同效果的方法也将不胜感激:)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

(updated JSFiddle here)

【讨论】：

伟大而简单的答案，你能解释一下为什么会这样吗？似乎在 2018 年仍然很流行。
这是本例中发生的情况：初始状态 page1 被显示，page2 被隐藏 | 第一次点击菜单，page1被缩小，隐藏，然后page2显示| 第二次点击：page1 被扩展，而page2 仍然可见。由于 page1 和 page2 不能都放入容器中，所以 page2 被推到右边，然后在没有剩余空间的情况下推到 page1 下。添加overflow: hidden 并不能真正解决问题，它只是隐藏了所有不适合容器的元素。因为它的高度是固定的，所以page2一被推到第二行就被隐藏了。
所以为了防止这种情况，将 jquery 动画链接起来，这样一个在另一个完成之前不能开始是不是更好的做法？

【解决方案2】：

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

【讨论】：