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

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

这就是我所知道的：

HTML:

脚本：

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

但是当隐藏的div被赋予可见性时，您可以在页脚中看到闪烁

• 有没有办法消除这种情况

• 如果我删除

  -webkit转换：高度5s，div从右上到左下设置动画（
  toggle（）
  同时设置高度、宽度和不透明度的动画）是否可以禁用高度更改并从右到左设置动画
  

• 是否有任何方法可以避免jQuery并使用纯css3实现这一点

---

使用css动画实现同样效果的任何其他方法也将不胜感激：）

在

上添加
溢出：隐藏
#内容
可以解决您的问题：

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

（）
我也喜欢这个想法。此外，您还可以通过使用css制作动画来摆脱大部分jquery。使用
transition
将div绝对定位在带有
溢出：隐藏的div之外。然后将
.active
设置到您想要的位置。
答案又好又简单，您能解释一下原因吗？2018年似乎仍然盛行。这种情况就是这样：显示初始状态page1，
page2
隐藏|第一次单击菜单，page1缩小、隐藏，然后显示
page2
|第二次单击：page1扩展，而
page2
仍然可见。由于page1和
page2
不能同时放入容器中，因此将
page2
推到右侧，然后在没有空间时推到page1下方。添加
overflow:hidden
并不能真正解决问题，它只是隐藏了容器中不适合的所有元素。因为它的高度是固定的，
page2
一推到第二行就隐藏了。所以为了防止这种情况，最好将jquery动画链接起来，这样一个动画就不能在另一个动画完成之前开始了？
$('#contentMenu').click(function () {
   $('#page1').toggle('fast', 'swing', function () {
      $('#page2').toggleClass('dis'); 
    });
});

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