如何设置样式显示：角度动画之前和之后的查询都没有？答案

【问题标题】：How to set style display: none to a query before and after the angular animation?如何设置样式显示：角度动画之前和之后的查询都没有？
【发布时间】：2019-10-10 11:36:24
【问题描述】：

我有一个大的角形材料形式被分成更小的和平，我想在我放置控件的垫卡之间制作动画。我使用 *ngIf 来显示和隐藏卡片，但初始化内容会产生动画粗糙，所以我想用 display none 代替它。我无法弄清楚如何在其他步骤中隐藏卡片。

这是我的简化组件：

@Component({
  selector: "material-app",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"],
  animations: [
    trigger("state", [
      //state("state2", style({ display: "none" })),
      transition("state1 => state2", [
        group([
          query('#card2', [style({display: 'none', opacity: 0})]),
          query("#card1", [
            animate(
              `${AnimationDurations.EXITING} ${
                AnimationCurves.ACCELERATION_CURVE
              }`,
              style({ transform: "translateY(56px)", opacity: 0, display: 'none' })
            )
          ])
        ]),
        query("#card2", [
          style({ opacity: 0, display: '*' }),
          group([
            style({
              transform: "translateY(-56px)",
              opacity: 0
            }),
            animate(
              `${AnimationDurations.ENTERING} ${
                AnimationCurves.DECELERATION_CURVE
              }`,
              style("*")
            )
          ])
        ])
      ])
    ])
  ]
})
export class AppComponent {
  state = 'state1';
  reset() {
    setTimeout(()=> {
      this.state = 'state1'
    }, 500)
  }
}

这将是我的模板

<div class="wrapper">
    <mat-radio-group [(ngModel)]="state">
        <mat-radio-button value="state1">State 1</mat-radio-button>
        <mat-radio-button value="state2">State 2</mat-radio-button>
    </mat-radio-group>
</div>
<div class="wrapper" [@trigger]="state" (@trigger.done)="reset()">
    <mat-card id="card1">Card 1</mat-card>
    <mat-card id="card2">Card 2</mat-card>
</div>

我想在state === state1 时隐藏#card2，反之亦然。动画正常工作，但前后两张卡片均可见。

我的 stackblitz 示例：https://stackblitz.com/edit/angular-switch-card-animation

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

如果我理解正确，试试这样的代码：


    <mat-card id="card1" [style.display]="state=='state1'?'block':'none'">Card 1</mat-card>
    <mat-card id="card2" [style.display]="state=='state2'?'block':'none'">Card 2</mat-card>

【讨论】：

是的，我也试过这个，但这会立即隐藏#card1，而不是在转换之后。 @roma-ruzich

【解决方案2】：

这是我的解决方案，但在我的示例中只是尝试在您的项目中使用它，

我在 Angular 7 上遇到过这个问题

  animations: [
trigger('openClose', [
  // ...
  state('open', style({
    'height': '20px', 'width':'120px', 'opacity': '1'
  })),
  state('closed', style({
    'height': '0','width':'0', 'opacity': '0'
  })),
  transition('open => closed', [
    animate('1s')
  ]),
  transition('closed => open', [
    animate('0.5s')
  ]),
]),]

在组件中

  isOpen = true
  toggle() {
     this.isOpen = !this.isOpen;
  }

它是

      Click to toggle the animation : <button (click)="toggle()" style="cursor: pointer;" aria-label="Example delete icon">
    {{isOpen? 'Hide input' : 'Display input'}}
  </button>
  <input style="margin-left:10px" [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container" placeholder="" />

这里是演示

stackblitz angular -7 display style solution

【讨论】：