Angular 动画因不透明度设置而失败（以及更多错误）

Question

我有一个卡片组件，里面包裹着另一个不同的组件。它就像一个包装器组件，用于制作 UI 花哨的东西；我猜你已经看过很多次这种方法了。

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

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

我单击在可见和隐藏之间切换卡片的图标。
它输出（使用@Output()）子元素中使用的一些变量，用于隐藏您只想在卡片为 "activated" 时显示的组件部分。
这个相同的变量用在两种不同的动画中：一种在卡片中，用于使其变小，另一种在内部组件中，用于在卡片处于 "deactivated".

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

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

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

"normal" 次点击的行为： 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'))
  ])
]

我尝试加入转换、"ease in"、"ease out" 以及 "fade" 选项，但似乎没有任何改变行为。甚至不改变持续时间。 None 这些更改避免了这些错误的发生，绝对没有人让它做我想做的事：让组件的那部分显示缓慢，所以不透明度 grows/lowers 从一种状态慢慢下降到另一种状态，而不是突然 appearing/disappearing.

Answer 1

如果您使用更改其可见性的组件，则必须使用两个转换别名：

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

您可以阅读official documentation here or watch on youtube。

Angular 动画因不透明度设置而失败（以及更多错误）

Angular animations failing for opacity settings (and more bugs)

javascript

css

angular

angular-animations

Angular 动画因不透明度​​设置而失败（以及更多错误）

Angular animations failing for opacity settings (and more bugs)

javascript

css

angular

angular-animations

Angular 动画因不透明度设置而失败（以及更多错误）