サイドバーの角度2+、アニメーション、CSS制御の変換

Question

サイドバーがあり、メニューアイコンがあります。アイコンを押すと、サイドバーが見えなくなり、メインコンテンツの幅が変更されます。しかし、ブラウザのウィンドウの幅が500pxを下回ると自動的に外に出て、500pxを超えると自動的に再び飛び出して、サイドバーを開いたり閉じることができるようにしたり、私はこれをします？少しスタイリングで

<div class="sidenav" [@slideInOut]="menuState"> 
    <span (click)="toggleMenu()" class="ham-menu"><b>☰</b></span> 
</div> 

<div [@contentMargin]="contentWidth" class="content"> 
    content 
</div> 

：私は、私はちょうど私が持っているコードがどのように、知らない、CSSクラス、すべてのTS-ロジックまたはその両方の組み合わせでそれをすべてやってどちらかに開いている

component.tsアニメーションの一部で

.sidenav { 
    background-color: #262a35; 
    color: #dbabab; 
    width: 200px; 
    height: 100vh; 
    font-size: 10px; 
    padding: 10px; 
    position: fixed; 
    z-index: 999; 
} 

.content { 
    width: 100vw; 
    position: fixed; 
    padding-top: 40px; 
} 

.ham-menu { 
    position: fixed; 
    color: #262a35; 
    font-size: 14px; 
    margin-left: 210px; 
    cursor: pointer; 
} 

：

animations: [ 
    trigger('slideInOut', [ 
     state('out', style({ 
     transform: 'translate3d(0px, 0, 0)' 
     })), 
     state('in', style({ 
     transform: 'translate3d(-200px, 0, 0)' 
     })), 
     transition('in => out', animate('400ms ease-in-out')), 
     transition('out => in', animate('400ms ease-in-out')) 
    ]), 
    trigger('contentMargin', [ 
     state('full', style({ 
     marginLeft: '210px', 
     width: 'calc(100% - 210px)' 
     })), 
     state('reduced', style({ 
     marginLeft: '10px', 
     width: 'calc(100% - 10px)' 
     })), 
     transition('reduced => full', animate('400ms ease-in-out')), 
     transition('full => reduced', animate('400ms ease-in-out')) 
    ]), 
    ] 

とロジック：

menuState = 'out'; 
contentWidth = 'full';  

toggleMenu() { 
    this.menuState = this.menuState === 'out' ? 'in' : 'out'; 
    this.contentWidth = this.contentWidth === 'full' ? 'reduced' : 'full'; 
} 

screenwidthに基づく

そして、自動サイズ変更のために、私は以下しようとしたが、それはうまくいきませんでした...

@media (max-width: 499.9px) { 
    .sidenav { 
    transition: 400ms ease-in-out; 
    transform: translate3d(-200px, 0, 0); 
    } 
} 

@media (min-width: 500px) { 
    .sidenav { 
    transition: 400ms ease-in-out; 
    transform: translate3d(0px, 0, 0); 
    } 
} 

Answer 1

それを行うための簡単な方法は、に角度のHostListenerデコレータを使用することですウィンドウの幅の変化を検出し、必要なロジックを追加します。

あなたは、あなたのcomponent.tsにこれを追加する必要があります：

@HostListener('window:resize', ['$event']) 
onResize(event) { 
    console.log("Width: " + event.target.innerWidth); 
    this.windowWidth = event.target.innerWidth; 
    if(this.windowWidth<500) { 
     this.menuState = 'in'; 
    } else { 
     this.menuState = 'out'; 
    } 
}