0

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

问题是在 sidenav 的打开和关闭时笨拙的打开动画 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>

萨斯：

#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;
}
4

1 回答 1

0

相当简单，我只是从增加侧面导航的宽度改为使用 ScaleX ......并且卡顿大大减少了。

.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-19T14:56:29.017 回答