Question

我正在尝试这样做，以便当您单击菜单按钮时，将在徽标和标题中的文本上播放滑动动画。它们都向左滑动。菜单滑出屏幕和文本幻灯片进入屏幕以替换徽标的位置。除此之外，菜单将在屏幕上下拉，如下面的js小提示所示。

我已经尝试了一段时间才能完成这项工作，但没有运气。我已经制作了一个JS小提琴来展示我的尝试：https://jsfiddle.net/n9tjvrjt/

JS小提琴包含的代码比平常多一些，我很抱歉，但我觉得所有代码都是至关重要的，以便我展示我的尝试。我认为关键组件是过渡，但由于某种原因它只是不想工作。我所指的代码写在下面

@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

您应该为所有人设置转换：

＆＃13;

 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;
  }

＆＃13;

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

1 个答案: