Невозможно вызвать Angular переход, чтобы развернуть / скрыть div - PullRequest
Новая
       5

Невозможно вызвать Angular переход, чтобы развернуть / скрыть div

0 голосов
/ 23 января 2020

Я использую Angular BrowserAnimations, но не могу запустить его.

Мои анимации компонентов установлены на 

animations: [
  trigger('expandHide', [
    state('expanded', style({
      height: 'auto'
    })),
    state('hidden', style({
      height: '20px'
    })),
    transition('* => expanded', [
      animate('1s')
    ]),
    transition('* => hidden', [
      animate('0.25s')
    ])
  ])
]

И мое определение шаблона для div Я хочу анимировать 

<div class="container" [@expandHide]="sheet.isExpanded ? 'expanded' : 'hidden'">

И да, sheet.isExpanded устанавливается в соседнем div с <div (click)="sheet.isExpanded = !sheet.isExpanded">

Я бы ожидал, что для увеличения высоты потребуется 1 с, и 0,25 с, чтобы рухнуть обратно вниз. Однако он просто открывается и закрывается сразу же, без каких-либо определенных переходов. Как я могу заставить эту анимацию работать?

1 Ответ

0 голосов
/ 23 января 2020
  1. Удалить подстановочные знаки 
'* => expanded'　→　'hidden => expanded'
'* => hidden' →　'expanded => hidden'
Кто-нибудь меняет ваш sheet.isExpanded флаг?

Самое простое решение - 

<div
  class="container" 
  [@expandHide]="sheet.isExpanded ? 'expanded' : 'hidden'"
  (click)="sheet.isExpanded=!sheet.isExpanded" ★ this one
>

Взгляните на пример .

...