Question

我正在尝试排序如何使用初始状态执行角度动画。我正在尝试开发一个上下滑动动画，到目前为止：

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，运行高度动画，并保持阻止。在另一个方向，我想阻止它，直到它完成，添加display: none。

我尝试添加一个display none的类，但由于动画不会在之前/之后添加一个类，所以它没有按预期工作。我怀疑这应该是Angular动画JS和CSS类的组合，但我无法弄清楚这种模式。如何解决这个问题的任何建议都会很棒。

Answer 1

我认为你需要两个过渡来获得你想要的东西。

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')])
    ]
)

Answer 2

不确定这是否正是您想要的，但是您可以使用self.ref.child("users").child(user?.user.uid).setValue(newUserInfo, withCompletionBlock: { (error, ref) in print("New User Saved") }来描述“默认”状态。我看到您已经在使用高度进行此操作，但是您也可以将状态定义为self.ref.child("users").child(user?.user.uid).setValue: newUserInfo, withCompletionBlock: { (error, ref) in print("New User Saved") })。

我希望能够显示和隐藏箭头。因此，它具有两个逻辑状态“输入”和“输出”。在两者之间进行切换非常容易。但是，如果初始状态应该为“进入”，那么我希望它淡入，但除非定义{{}，否则*动画甚至*都不会有“起点” 1}}状态。

out => in

所以我的图标是这样定义的（请注意，这是一个自定义的svg）：

* => 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) ]) ]) ],的初始状态（不透明度为0）。

<mat-icon [@showArrow]="(showArrow$ | async) ? 'in' : 'out'"
          svgIcon="right-arrow"></mat-icon>

具有初始/后状态的动画

2 个答案: