单击菜单上的幻灯片徽标和文本

Question

我正在尝试使当您单击菜单按钮时，会在徽标和标题中的文本上播放滑动动画。他们两个都要向左滑动。菜单滑出屏幕，文本滑入屏幕以替换徽标的位置。除此之外，屏幕上会下拉一个菜单，如下面的 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;
  }
}

正如您将在小提琴中看到的那样，代码的行为完全符合我的要求，除了动画从不播放。我不知道为什么，非常感谢任何帮助。

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

重要提示，请在测试小提琴时将屏幕大小调整为 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;
  }