Question

我们有一个带侧边的Angular 4网络应用程序。当点击汉堡包图标时，sidenav动画从右向左打开，通过JS给它一个宽度并通过CSS过渡，背景中的主要内容div淡化为不透明的黑色。

问题是侧面开启和关闭时笨重的开场动画，jank。

请记住，我对Angular还是一个相当新的人。代码是：

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，动画会更顺畅。

此外，这在使用Google 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;
}

Answer 1

相当简单，我只是从增加侧导航的宽度，改为使用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;
}

Mac上的CSS过渡动画Jank w / zindex（Retina）

1 个答案: