无法触发 Angular 转换以展开/隐藏 div

Question

我正在使用 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 (click)="sheet.isExpanded = !sheet.isExpanded"> 设置在相邻的div 中

我预计它需要 1 秒的时间来扩展高度，而 0.25 秒的时间会倒塌。然而，它只是像没有定义任何转换一样立即打开和关闭。我怎样才能让这个动画工作？

Answer 1

1. 删除通配符

'* => expanded'　→　'hidden => expanded'
'* => hidden' →　'expanded => hidden'

1. 有人更改您的sheet.isExpanded 标志吗？

最简单的解决办法是

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

看看example。