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

Question

我正在尝试整理如何制作具有初始状态的 Angular 动画。我正在尝试开发向上/向下滑动动画，到目前为止:

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

在 jQuery 版本中，有问题的元素上有 display: none，我注意到 jQuery 滑动打开，然后我看到 display: block最终元素。

当我将 display: 'block' 如上所述注释掉时，它按预期工作，但是，当页面加载时，它从元素开始，从全高变为无(这是有道理的我猜？)，这对用户来说很奇怪。

我正在尝试弄清楚如何设置它，以便在关闭时首先转到 display: block，运行高度动画，然后保持 block 。在另一个方向，我想在完成之前一直阻塞，添加一个 display: none。

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

Answer 1

不确定这是否正是您想要的，但您可以使用 * 来描述一种状态，即“默认”状态。我看到您已经在使用高度执行此操作，但您也可以将状态定义为 *。

我希望能够显示和隐藏箭头。所以它有两个逻辑状态“in”和“out”。这很容易在两者之间切换。但是，如果初始状态应该是“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>

即使初始状态被硬编码为 true(因此没有状态变化)它仍然会淡入，因为我已经定义了一个 * 起始状态(不透明度为 0)。

    this.showArrow$ = new BehaviorSubject(true);