CSS текст sidenav не исчезает при открытии или открытии sidenav - PullRequest
0 голосов
/ 28 апреля 2020

Я хотел бы показать текст на 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

1 Ответ

1 голос
/ 28 апреля 2020

Похоже, что вы допустили небольшую ошибку со своими переходами в анимации 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'))
]);

РЕДАКТИРОВАТЬ: Вы также можете взглянуть на анимации по ключевым кадрам для более сложных анимаций. С ключевыми кадрами можно было бы использовать свойство 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 добавляется в конце, анимация не нарушается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...