Angular 具有初始/之后状态的动画

我正在尝试整理如何使用初始状态制作角度动画。到目前为止，我正在尝试开发一个向上/向下滑动动画，包括：

trigger(
    'slideHeight',
    [
        state('closed', style({
            display: 'none',
            height: 0
        })),
        state('open', style({
            // display: 'block',
            height: '*'
        })),
        transition('* <=> *', [
            style({
                display: 'block'
            }),
            animate('.5s ease')
        ])
    ]
)

触发器(
“滑动重量”，
[
状态（'closed'，样式({
显示：“无”，
身高：0
})),
状态（'open'，样式({
//显示：“块”，
高度：'*'
})),
转换（'**'[
风格({
显示：“块”
}),
设置动画（'.5s轻松'）
])
]
)

在jQuery版本中，所讨论的元素上有

display:none

，我注意到jQuery滑动打开，然后我在最后一个元素上看到

display:block

当我像上面那样注释掉

display:'block'

时，它会像预期的那样工作，但是，当页面加载时，它开始时元素从全高变为无（我想这是有意义的吧？），这对用户来说很奇怪

我试图弄清楚如何设置它，使其在关闭时，首先进入

display:block

，运行高度动画并保持block。在另一个方向上，我想让block完成，添加一个

display:none

---

我尝试过添加一个没有显示的类，但是由于动画没有在之前/之后添加类，所以它没有像预期的那样工作。我怀疑这应该是Angular animation JS和CSS类的组合，但我不太明白其中的模式。任何关于如何解决这一问题的建议都将是非常好的。

我认为您需要两个过渡才能得到您想要的

trigger(
    'slideHeight',
    [
        state('closed', style({
            display: 'none',
            height: 0
        })),
        state('open', style({
            height: '*'
        })),
        transition('closed => open', [style({ display: none }), animate('.5s ease')]),
        transition('open => closed', [style({ display: 'block' }), animate('.5s ease')])
    ]
)

---

不确定这是否正是您想要的，但您可以使用

*

来描述一种状态，即“默认”状态。我看到您已经在使用height进行此操作，但您也可以将状态定义为

*

我希望能够显示和隐藏箭头。所以它有两个逻辑状态“in”和“out”。这很容易在两者之间切换。但是如果初始状态应该是“in”，那么我希望它淡入，但是在动画中甚至在中都不会有一个

*=>的
*=>的“起点”，除非您定义了一个
*
状态

 animations: [
    trigger('showArrow',
    [            
        state('*', style({opacity: 0})),
        state('in', style({opacity: 1})),
        state('out', style({opacity: 0})),

        transition('* => in', [
           animate(15000)    
        ]),

        transition('* => out', [
            animate(200)
        ])
    ])
  ],

因此，我的图标定义如下（请注意，这是一个自定义svg）：

实际上，我不希望中间样式永远为“无”，但我注意到我无法应用中间样式：（如果在制作动画时检查长方体，它将永远不会应用任何中间样式）。
<mat-icon [@showArrow]="(showArrow$ | async) ? 'in' : 'out'"
          svgIcon="right-arrow"></mat-icon>

    this.showArrow$ = new BehaviorSubject(true);