时间戳

首页 > 解决方案 > CSS sidenav 文本不会在 ngIf 或 sidenav 打开时淡入

html - CSS sidenav 文本不会在 ngIf 或 sidenav 打开时淡入

问题描述

我想在 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

标签： htmlcssangular

解决方案

看起来您在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-widthor 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'))
]);

编辑：您还可以查看关键帧动画以获得更复杂的动画。使用关键帧可以使用该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表示动画进度）

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

推荐阅读