Question

我使用Angular 6和@angular/animations模块，试图实现一个自定义sidenav元素，该元素必须通过单击按钮从主页平滑地滑入和滑出。

如您所见here，该元素平滑地隐藏在左侧，但是没有相反的方向消失，只是消失了。

这是动画的代码：

animations: [
    trigger('slideMenu', [
      state('false', style({
        transform: 'translateX(-250px)'
      })),
      state('true', style({
        transform: 'translateX(0)'
      })),
      transition('true <=> false', animate('400ms ease-in-out'))
    ])
  ]

完整的项目可以在https://stackblitz.com/edit/slide-demo中看到。

如何使组件正确地向两个方向滑动？

修改
使用该组件的相关html：

<app-home-sidenav [@slideMenu]="isVisible ? true : false" [hidden]="!isVisible"></app-home-sidenav>  
  <div class="home-content">
    <div class="home-label">
      <span>This content should expand upon hiding sidenav</span>
    </div>
    <button (click)="onToggle()">
    Toggle Sidenav
  </button>
</div>

Answer 1

之所以发生这种情况，是因为您正在组件中使用[hidden]="!isVisible"，并且没有任何延迟地对它进行评估，并在动画之前隐藏了侧边栏。
如果您删除[hidden]属性并像这样设置'false'状态，它将以正确的方式帮助您：

state('false', style({
    transform: 'translateX(-250px)',
    display: 'none'
}))

但是据我所知，如果您希望主要内容与侧边栏一起传播，则需要另一个动画。

使用Angular动画滑入和滑出组件

1 个答案: