基础5离场导航动画时间

Question

基础5画布外动画效果很好，但我只希望修改菜单输入时间，而我没有找到任何与此控件相关的内容。谁能帮我吗？谢谢！

Answer 1

Foundation 5使用CSS转换规则来控制菜单打开和关闭时的时间。

您可以在foundation/scss/foundation/components/_offcanvas.scss，第60行（取决于您使用的基础的哪个次要版本）中看到以下内容：

// Transition Variables
$menu-slide: "transform 500ms ease" !default;

稍后在文件中，它应用于内部包装元素：

// INNER WRAP
// Main content area that moves to reveal the off-canvas nav
@mixin inner-wrap {
  @extend %kill-flicker;
  @extend %wrap-base;
  @include clearfix;

  -webkit-transition: -webkit-#{$menu-slide};
  -moz-transition: -moz-#{$menu-slide};
  -ms-transition: -ms-#{$menu-slide};
  -o-transition: -o-#{$menu-slide};
  transition: #{$menu-slide};
}

因此，如果您想更改时间，则可以将500ms更改为其他值。