Angular2+、动画和 css 控制侧边栏的变换

Question

我有一个侧边栏，它有一个菜单图标，按下该图标会将侧边栏移出视图，并调整主要内容的宽度。但我也希望它在浏览器 window 宽度低于 500px 时自动移出视图，并在高于 500px 时自动再次跳出，同时仍然保持用户仍然可以打开和关闭的能力侧边栏，我该怎么做？我愿意用 css 类、所有 ts-logic 或两者的组合来完成这一切，我只是不知道怎么做，我的代码是：

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

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

有点造型：

.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;
}

随着 component.ts 动画部分：

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';
}

然后我在下面尝试了基于屏幕宽度的自动调整大小，但是没有用...

@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

一个简单的方法是使用 Angular 的 HostListener 装饰器来检测 window 的宽度变化，然后添加想要的逻辑。

您只需将此添加到您的 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';
    }
}

Angular2+、动画和 css 控制侧边栏的变换

Angular2+, animation and css controlling transform of sidebar

angular

css-animations

angular-animations