Question

我在角度淡入/淡出中有一个动画，在将角度v6升级到v7之前，这项工作正常进行。我的代码：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss', 
  ],
  animations: [
   trigger('hideShowAnimator', [
    state('true', style({ opacity: 1, display: 'block' })),
    state('false', style({ opacity: 0, display: 'none' })),
    transition('0 => 1', animate('200ms ease-in')),
    transition('1 => 0', animate('200ms ease-out'))
  ])
  ],

})

所以，我申请了我的div：

    <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

现在，只有我的fadOut起作用。为什么？

Answer 1

请改为使用可视性属性，如果要摆脱容器占用的空间，则将height属性设置为0，反之亦然。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('hideShowAnimator', [
      state('true', style({ opacity: 1, visibility: 'visible' })),
      state('false', style({ opacity: 0, visibility: 'hidden' })),
      transition('0 => 1', animate('500ms ease-in')),
      transition('1 => 0', animate('500ms ease-out')),
    ]),
  ],
})

我注意到这是因为框和按钮的位置（x，y）发生了变化。如果它们并存，则可以进行以下操作：

<div style="display: flex; flex-direction: row;">
  <ul>
    <i (click)="toggle()">Click</i>
  </ul>
  <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">
    <img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  </div>
</div>

Answer 2

问题是display: 'none'。如果将其更改为block，它将按预期工作，但将其更改为none则意味着直到转换后它才会显示，因为带有opacity: X, display: 'none'的css样式，其中X是任何值仍然永远不会呈现。

animations: [
  trigger('hideShowAnimator', [
  state('true', style({ opacity: 1, display: 'block' })),
  state('false', style({ opacity: 0, display: 'block' })),
  transition('0 => 1', animate('200ms ease-in')),
  transition('1 => 0', animate('200ms ease-out'))
])],

请参见this stackblitz

Answer 3

我认为display：none可能不是问题。最好使用* ng（如果角度提供）。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss', 
  ],
  animations: [
  trigger('hideShowAnimator', [
    transition('void => *', [
      style({opacity:0}),
      animate(200ms ease-in, style({opacity:1})) 
    ]),
    transition('* => void', [
      animate(200ms ease-in, style({opacity:0})) 
    ])
  ])
})

  <div [@hideShowAnimator] id="cardNotificacao" class="card" *ngIf="abreNotificacoes">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

动画角度仅在错误状态下工作

3 个答案: