Question

我有一个卡片组件，里面包含另一个不同的组件。它就像一个用于制作UI幻想的包装组件;我想你已多次看过这种方法了。

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

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

我点击了在可见和隐藏之间切换卡片的图标。
它输出（使用@Output（））在子元素中使用的一些变量，用于隐藏当卡被激活时仅显示的组件部分＆＃34;。
同一个变量用于两个不同的动画：卡片中的一个用于缩小，另一个用于内部组件，用于隐藏卡片为＆＃时不想显示的部分34;去激活＆＃34;

从实施开始，你可以看到这些小片段的大局：

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

好的，这种方法＆＃34; 有效＆＃34;。看到GIF并自己判断：

行为＆＃34;正常＆＃34;点击： 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'))
  ])
]

我尝试过转换，＆＃34;轻松进入＆＃34;，＆＃34;轻松退出＆＃34;以及＆＃34;淡出＆＃34;选项，但似乎没有改变行为。甚至没有改变持续时间。 这些变化都没有避免这些错误的发生，绝对没有人让它做我想做的事情：让组件的那部分显得缓慢，所以不透明度从一个状态缓慢增长/降低到另一个，而不是突然出现/消失。

Answer 1

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

:enter等效于void => *过渡状态。
:leave等效于* => void过渡状态。

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

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

1 个答案: