基金会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为不同的值。