CSS sidenav文本未在ngIf或sidenav开口上消失

Question

我想在sidenav上显示文本，以便在打开时淡入并在关闭时淡出。我不喜欢打开sidenav时文本只是“弹出”。

我在这里有这个动画模板

export const animateText = trigger('animateText', [
  state('hide',
    style({
      'display': 'none',
      opacity: 0,
    })
  ),
  state('show',
    style({
      'display': 'block',
      opacity: 1,
    })
  ),
  transition('close => open', animate('1500s ease-in')),
  transition('open => close', animate('1500s ease-out')),
]);

这是我的html

<div class="sidenav_container"  [@onSideNavChange]="sideNavState ? 'open' : 'close'">
  <div fxLayout="column" fxLayoutGap="10px" style="height: 100%;">

    <div class="user_menu text-center">
      <mat-nav-list >
        <a mat-list-item >
          <img class="jim" src="https://a57.foxnews.com/media2.foxnews.com/BrightCove/694940094001/2018/06/21/931/524/694940094001_5800293009001_5800284148001-vs.jpg?ve=1&tl=1" alt="">
          <span [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
        </a>
      </mat-nav-list>
      <mat-divider></mat-divider>
    </div>

    <div>
      <header style="text-align:center; background-color:lightgray; color:royalblue;">Links</header>
      <mat-nav-list>
        <a mat-list-item *ngFor="let page of pages">
          <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
          <span [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
        </a>
      </mat-nav-list>
    </div>
  </div>

  <span class="spacer"></span>
  <div fxLayout="row" fxLayoutAlign="end end" style="padding: 0px 10px;">
    <button mat-icon-button (click)="onSinenavToggle()">
      <mat-icon *ngIf="sideNavState">arrow_left</mat-icon>
      <mat-icon *ngIf="!sideNavState">arrow_right</mat-icon>
    </button>
  </div>
</div>

这里是显示我的意思的闪电战。当您打开sidenav容器时，文本会弹出或显示。我希望它淡入]

https://stackblitz.com/edit/angular-9kjy2t?file=src%2Fapp%2Fcomponents%2Fleft-menu%2Fleft-menu.component.html

Answer 1

[您似乎在animateText动画中的过渡时犯了一个小错误：

transition('close => open', animate('1500s ease-in')),
transition('open => close', animate('1500s ease-out')),

应该是：

transition('hide => show', animate('1500ms ease-in')),
transition('show => hide', animate('1500ms ease-out'))

此外，无法创建具有display属性的动画。您应该使用max-width或transfrom: scale()。

一个例子是：

export const animateText = trigger('animateText', [
  state('hide',
    style({
      opacity: 0,
      'max-width': 0,
      transform: 'scale(.5)'
    })
  ),
  state('show',
    style({
      opacity: 1,
      'max-width': '200px',
      transform: 'scale(1)'
    })
  ),
  transition('hide => show', animate('250ms ease-in')),
  transition('show => hide', animate('250ms ease-out'))
]);

EDIT：对于更复杂的动画，您也可以查看keyframe animations。对于关键帧，可以使用display: none属性。

 transition('show => hide', [
      animate(
        `500ms linear`,
        keyframes([
          style({ transform: 'scale(1)', opacity: 1, offset: 0 }),
          style({ transform: 'scale(.5)', opacity: 0, offset: .99 }),
          style({ transform: 'scale(.5)', opacity: 0, display: 'none', offset: 1 }),
        ])
      )
    ])

（[offset表示动画进度）

上面的示例创建一个淡出动画，并在动画达到100％后添加display: none。因为display: none是最后添加的，所以它不会破坏动画。