javascript - Angular 动画因不透明度​​设置而失败(以及更多错误)

Question

我有一个卡片组件，其中包含另一个不同的组件。它就像一个包装器组件，用于使 UI 看起来很漂亮；我想您已经多次看到这种方法。

问题是，我希望这些卡片是可隐藏的，只显示页脚(顺便说一句，这也是由子组件创建的，而不是卡片本身)。

因此，我处理动画的方法是:

1. 我点击了在可见和隐藏之间切换卡片的图标。
2. 它输出(使用@Output())子元素中使用的一些变量，用于隐藏您只想在卡片“激活”时显示的组件部分。
3. 这个相同的变量用在两个不同的动画中:一个在卡片中，用于使其变小，另一个在内部组件中，用于在卡片“停用”时隐藏您不想显示的部分。

从实现开始，您可以通过这些小片段了解全局:

<card [title]="'DATE SELECT'" class="col" (cardOpen)="config?.cardStatus['dateselect'] = $event">
   <date-picker-wrapper class="date-wrapper" [cardOpen]="config?.cardStatus['dateselect']" [config]="config" [dateranges]="dateranges" [doubleDateRange]="false">
   </date-picker-wrapper>
</card>

内部组件:

<div class="row margin upper-margin" [@animate]="cardOpen">
    // lots of code
</div>

父组件(卡片):

@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: `
    <div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="switchVisibility()" class="fa fa-chevron-down icon-right"></i>
      </div>
      <ng-content></ng-content>

    </div>
    `,
    animations: [
      trigger('animate', [
        state('false', style({
          minHeight: "98px",
          height: "98px",
          maxHeight: "98px",

        })),
        state('true', style({
          minHeight: "270px",
          height: "270px",
          maxHeight: "270px"
        })),
        transition('false => true', animate('400ms ease-in')),
        transition('true => false', animate('400ms ease-out'))
      ])
    ]
})

好的，这种方法“有效”。看动图，自己判断:

“正常”点击的行为: https://gyazo.com/2c24d457797de947e907eed8a7ec432e

快速点击时的奇怪错误(出现在这种情况下的各种不同错误之一): https://gyazo.com/bdc8dde3b24b712fa2b5f4dd530970dc

好吧，这很奇怪。看看我的代码是如何在内部组件中隐藏我不想显示的部分:

animations: [
  trigger('animate', [
    state('false', style({
      opacity: 0
    })),
    state('true', style({
      opacity: 1
    })),
    transition('false => true', animate('100ms')),
    transition('true => false', animate('100ms'))
  ])
]

我尝试加入过渡、“缓入”、“缓出”以及“淡入淡出”选项，但似乎没有任何改变行为。甚至不改变持续时间。 这些更改都不能避免这些错误的发生，而且绝对没有人让它做我想做的事:让组件的那部分缓慢出现，因此不透明度从一种状态缓慢增长/降低到另一个，而不是突然出现/消失。

Answer 1

如果你使用一个改变其可见性的组件，你必须使用两个转换别名:

• :enter 相当于void => * 过渡状态。
• :leave 相当于* => void 过渡状态。

您可以阅读 official documentation在这里或观看on youtube .