Question

我正在尝试创建一个简单的非画布＆＃34; push＆＃34;菜单。单击菜单触发器时，菜单将从视口右侧滑入，并将主内容divs按菜单宽度偏移。

jQuery正常工作（将菜单推送到页面上，并将内容从页面中推出），但动画无法按预期工作。有一些＆＃34;追赶＆＃34;菜单移动速度比主要内容区域慢。

我设置transition-delay来解决此问题，但它似乎没有产生我认为会产生的效果。

我如何设法让内容div在屏幕外移动，看起来它们被菜单推送？

以下是我的问题示例：http://codepen.io/anon/pen/GrKJor

这是我的代码：

$('.nav-trigger').click(function(){
  $('nav').addClass('nav--open');
  $('header').addClass('content--pushed');
  $('main').addClass('content--pushed');
  $('footer').addClass('content--pushed');
});

这是过渡的CSS：

nav {
  ...
  right: -300px;
  transition: right 0.2s ease-in;
}

.nav--open {
  right: 0px;
}

.content--pushed {
  position: relative;
  right: 300px;
}

Answer 1

问题在于您是否尝试以某种方式为属性设置动画 - 特别是正确的位置 - 如果动画元素具有position:fixed，则该方式仅适用于您的标记结构。

您可以在此分叉CodePen中看到所需的行为： http://codepen.io/anon/pen/ygBNXG

（我还添加了一个＆＃39; nav-close＆＃39;按钮，以便您可以反复看到反向和测试）

通过在标题中应用固定位置，主要＆amp;页脚，过渡效果确实可以动画：

header, main, footer {
  position: fixed;
  /* other CSS */
}

为了解释固定位置，我然后偏移了主要位置的顶部位置。基于您定义的高度的页脚：

main {
  top:100px
}
footer {
  top:200px
}

最后，这只是偏好，我做了标题的左侧位置，主要和＆amp;页脚会发生变化（从0到-300px），因为它似乎更准确地反映了正在发生的事情，即那些元素正在从视口的左边缘移动300px。

<强>更新

如果您不想在元素上使用position:fixed，则需要修改标记结构以包装标题，主要和＆amp;页脚元素并将所述包装器的导航元素放在之外。这是在这里没有固定位置和高度/偏移： http://codepen.io/anon/pen/qREvEB

修订后的标记基本上是：

<div class="wrapper">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>
<nav>...</nav>

在这种情况下，标题，主要和＆amp;的位置。页脚可以重置为相对，内容可以根据需要滚动。

简单的jQuery＆＃34; push＆＃34; menu - 偏移主容器和菜单，但转换时间不正确

1 个答案: