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

Posted 2023-03-06

【中文标题】角度动画因不透明度​​设置而失败（以及更多错误）

【英文标题】：Angular animations failing for opacity settings (and more bugs)

【发布时间】：2018-09-24 00:01:45

【问题描述】：

我有一个卡片组件，它在里面包装了另一个不同的组件。它就像一个包装器组件，用于使 UI 变得花哨；我猜你已经多次看到这种方法了。

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

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

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

您可以通过这些小 sn-ps 看到全局，从实现开始：

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

好的，这种方法“有效”。查看 GIF 并自行判断：

“正常”点击的行为： 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'))
  ])
]

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

【问题讨论】：

你能创建 StackBlitz 演示吗？

使用您提供的代码，我们无法帮助您解决问题，因为您的动画代码看起来不错，问题一定出在您未提供的代码的某些部分。如果您进行 stackblitz，我们可能会提供帮助。同样，动画中的不透明度应该可以很好地完成这项工作。

我看到了与不透明元素相关的动画和 z-index 错误。这主要是在铬。通过擦除不透明度并在元素上放置适当的颜色来修复它们。

真的很疯狂的问题，因为我看不到你的 css：你有 overflow-y: hidden 在折叠的元素上吗？默认情况下，如果未指定溢出将在这些动画期间显示。

【参考方案1】：

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

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

您可以在此处阅读official documentation 或观看on youtube。