单击时仅在单击时以角度4执行动画

Question

我有一个输入字段，在页面加载时显示。

点击搜索后，我会显示结果。

单击“隐藏搜索参数”时，我将隐藏搜索输入，而单击“显示节目”时，我将显示它。

但是问题是，当我在搜索输入字段上应用幻灯片并加载页面加载时，它正在制作动画。我只想在单击“隐藏”或显示您的搜索参数链接时添加动画。

这是我到目前为止尝试过的

<div class="row seven-cols" *ngIf="showSearch" [@slideIn]>
            <div class="col-md-2">
        <input class="form-control" placeholder="Store#">
                    </div>
                    <!-- Search Button -->
    <button type="button"[disabled]="isValidStoreId || !storeMod"
                            (click)="search(storeMod)">
                            {{componentContents.searchButton}}
                        </button>
                </div>

这是切换搜索的代码

<span class="filterPipe"><a href="javascript:void(0)" (click)="showSearch = !showSearch" class="toggleTxt">{{ showSearch == true ? 'Hide' : 'Show' }} {{componentDetails.searchToggleHead}}</a></span>

这是我的幻灯片动画的代码

 animations: [
    trigger('slideIn', [
      state('*', style({ 'overflow-y': 'hidden' })),
      state('void', style({ 'overflow-y': 'hidden' })),
      transition('* => void', [
        style({ height: '*' }),
        animate(250, style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: '0' }),
        animate(250, style({ height: '*' }))
      ])
    ])
  ]

请建议我如何处理？

Answer 1

您使用的* => void和void => *等效于:enter和:leave。每次元素出现/消失（使用*ngIf）都会触发它们。

要控制动画并在单击时将其触发，应使用自定义过渡（下面的代码中为active => inactive和inactive => active）。

像这样更改动画：

animations: [
  trigger('slideIn', [
    state('active', style({ 'overflow-y': 'hidden' })),
    state('inactive', style({ 'overflow-y': 'hidden' })),
    transition('active => inactive', [
      style({ height: '*' }),
      animate(250, style({ height: 0 }))
    ]),
    transition('inactive => active', [
      style({ height: '0' }),
      animate(250, style({ height: '*' }))
    ])
  ])
]

然后在您的HTML中，删除*ngIf并使用如下动画：

<div class="row seven-cols" [@slideIn]="showSearch?'active':'inactive'">

我还没有测试代码。但是应该可以。让我知道是否有任何错误。

如果您必须使用*ngIf

如果有必要使用*ngIf，则可以设置另一个变量，并在完成动画时将其打开和关闭。像这样：

(@slideIn.done)="animDone($event)"

和

animDone(e: AnimationEvent) => {
  if (e.toState === 'active') showSearchNgIf = true;
  else if (e.toState === 'inactive') showSearchNgIf = false;
}