CSS過渡動畫JANK W/Z-索引在Mac（視網膜）

我們有一個sidenav的角4 web應用程序。當點擊漢堡包圖標時，sidenav動畫通過JS通過給它一個寬度和通過CSS的轉換從右向左打開，並且背景中的主要內容div被淡化爲不透明的黑色。CSS過渡動畫JANK W/Z-索引在Mac（視網膜）

的問題是笨重的開場動畫，JANK，在sidenav的開啓和關閉。

請記住我仍然是一個相當新的角度裸露。代碼是：

public openNav() { 
    let offCanvas = document.getElementById('off-canvas-menu'); 
    let container = document.getElementById('main-wrapper-container'); 
    let openIndex = document.getElementById('main-view-container'); 

    offCanvas.style.width = "250px"; 
    openIndex.style.zIndex = '-1'; 

    setTimeout(function() {container.style.background = "rgba(0,0,0,0.4)"}, 200); 

} 

public closeNav() { 
    document.getElementById('off-canvas-menu').style.width = "0"; 
    document.getElementById('main-wrapper-container').style.background = "inherit"; 
    let closeIndex = document.getElementById('main-view-container'); 
    setTimeout(function() { closeIndex.style.zIndex = 'auto'}, 300); 
}

我與zindex設置的原因是因爲似乎有來自其他組件的意見問題。如果我刪除了zindex，那麼帶有不透明度的透明黑色不會顯示在頂部，它將疊加在主要內容下面。我嘗試了所有的東西來堆棧（在不同的div中使用zindex，在CSS中添加定位），但不確定這是Angular的問題，還是我錯過了某些東西，或者上面的代碼很糟糕。如果我刪除zindex，則動畫更平滑。

而且，這是在與谷歌Chrome和Safari（甚至視網膜屏幕上更普遍）的Mac更加明顯，在Firefox工程確定，在Windows上運行正常。

期待任何反饋！

HTML：

<span (click)="openNav()" id="open-off-canvas-menu-button" *ngIf="is_there_session()"> 
    <i class="fa fa-bars" aria-hidden="true"></i> 
</span> 

<div id="main-wrapper-container" (click)="closeNav()"> 
    <div id="main-view-container"> 
    <router-outlet></router-outlet> 
    </div> 
</div>

SASS：

#open-off-canvas-menu-button{ 
    position: fixed; 
    top: 0; 
    right:0; 
    padding: 25px 18px 0 0; 
    z-index: 500; 
    i{ 
     display: inline-block; 
     color: $gray-forty; 
     transition: color 500ms ease-in-out; 
     font-size: 18px; 
    } 

    &:hover { 
     cursor: pointer; 
    } 
} 


.off-canvas-menu { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    top: 0; 
    right: 0; 
    background-color: $black; 
    overflow-x: hidden; 
    padding-top: 60px; 
    @include transition(all .5s ease); 
    z-index: 1000; 
} 

.off-canvas-menu a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 1.5rem; 
    color: $gray-forty; 
    display: block; 
    width: 300px; 
    @include transition(all .5s ease); 
    &:hover { 
     cursor: pointer; 
    } 
} 

.off-canvas-menu a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.off-canvas-menu .closebtn { 
    position: absolute; 
    top: 5px; 
    transform: translateX(60%); 
    font-size: 36px; 
} 

#main-wrapper-container { 
    position: relative; 
    height: 100%; 
    min-height: 100vh; 
    width: 100%; 
    @include transition(all .4s ease); 
} 

#main-view-container { 
    position: relative; 
}

來源

2017-07-17 Edgar Quintero

如果您轉換/動畫'transform：translate（）/ scale（）'，您將獲得更好的性能。但爲了更好的解決方案，發佈你正在使用的HTML/css，所以我們有一個你正在使用的[mcve]。 –

謝謝，更新了HTML和SASS。 –

你有一堆變量和你的sass中的東西不起作用，但即使我替換它們，你的代碼也不提供[mcve]。你能否更新它來使其工作並複製問題？ https://codepen.io/mcoker/pen/VWOaXL –

相當簡單，我只是從提高側面導航的寬度改變，使用的ScaleX ......而JANK大幅度減少。

.off-canvas-menu { 
    height: 100%; 
    transform: scaleX(0); 
    transform-origin: 100% 50%; 
    width: 250px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    background-color: $black; 
    overflow-x: hidden; 
    padding-top: 60px; 
    @include transition(all .5s ease); 
    z-index: 1000; 
}

來源

2017-07-19 14:56:29

CSS過渡動畫JANK W/Z-索引在Mac（視網膜）

回答

相關問題