基金會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爲不同的值。