javascript - 在菜单上滑动 Logo 和文本单击

Question

我试图做到这一点，以便当您单击菜单按钮时，会在 Logo 和页眉中的文本上播放滑动动画。两者都向左滑动。菜单滑出屏幕，文本滑入屏幕以替换 Logo 的位置。除此之外，菜单将下拉到屏幕上，如下面的 js fiddle 所示。

我已经尝试了一段时间来完成这项工作，但没有成功。我制作了一个 JS Fiddle 来展示我的尝试:https://jsfiddle.net/n9tjvrjt/

JS Fiddle 包含的代码比平时多一点，我对此感到抱歉，但我觉得所有这些代码对于我展示我的尝试来说都是至关重要的。我相信关键部分是过渡，但出于某种原因它就是不想工作。我指的代码写在下面

@media only screen and (max-width: 670px) {
  html body .wrapper .header-wrapper .header-row .header-cell.header-profile {
    display: none;
  }
  html body .wrapper .header-wrapper .header-row .header-cell.header-profile.active {
    display: table-cell;
    width: 100%;
    padding-left: 20px;
    -moz-transition: 3s;
    -o-transition: 3s;
    -webkit-transition: 3s;
    transition: 3s;
  }
  html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active {
    position: absolute;
    left: -335px;
    -moz-transition: 3s;
    -o-transition: 3s;
    -webkit-transition: 3s;
    transition: 3s;
  }
}

正如您将在 fiddle 中看到的那样，代码的行为完全符合我的要求，只是动画从不播放。我不确定为什么，非常感谢任何帮助。

此外，请忽略长类名，它来自为演示问题而编译的 sass 文件。

重要说明，请在测试 fiddle 时将屏幕大小调整到 670 像素以下。

Answer 1

您应该为所有设置过渡:

 html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active {
    position: absolute;
    left: -335px;
    -moz-transition: all .3s ease-in;
    -o-transition:all .3s ease-in;
    -webkit-transition:all .3s ease-in;
    transition: all .3s ease-in;
  }