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

Posted 2023-03-07

【中文标题】如何消除此 JQuery/CSS3 动画中的闪烁

【英文标题】：How to eliminate the flicker from this JQuery/CSS3 Animation

【发布时间】：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 动画实现相同效果的方法也将不胜感激:)

【参考方案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到你想要的位置。