角度动画无法设置不透明度(以及更多错误)

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

好的,这种方法" 有效 ".看到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'))
  ])
]

我尝试过转换,"缓和","缓和",以及"淡入淡出"选项,但似乎没有任何改变行为.甚至没有改变持续时间.这些变化都没有避免这些错误的发生,绝对,没有人使得它做我想做的:使组件的一部分出现慢,所以不透明度的增长/从一个状态慢慢降低下来到另一个,而不是突然出现/消失.

Answer 1

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

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

您可以在此处阅读官方文档或在 youtube 上观看。