如何在 Angular 7 上有一些延迟显示点击表单？答案

【问题标题】：How to show a Form on Click with some delay on Angular 7?如何在 Angular 7 上有一些延迟显示点击表单？
【发布时间】：2019-08-31 15:23:34
【问题描述】：

我必须在 Angular 7 中更改一些 angularJS 代码。

我有一个函数，onClick 会在主表单的底部显示一个新表单。

HTML

<img [hidden]=  "!skillsToDelete"
 (click)="showFormDelete(skill)" title="Delete"
 class="cross"
 src="../../../assets/icon/deletex.png">

打字稿

    this.showCompDelete = false;

showFormDelete(skill) {
    this.showCompDelete = !this.showCompDelete;
    this.skillsToDelete.push(skill);
}

HTML 删除组件

<div class="col-md-12 col-sm-12 newForm" id="deleteSkill" *ngIf="showCompDelete">

CSS

.newForm{
    padding-left: 0;
    height: auto;
    opacity: 1;
    transition: height ease 0.3s, opacity ease 0.3s, margin-bottom ease 0.3s, padding-top ease 0.3s
}

这个过渡不起作用，我也试过 -webkit 但没有任何反应。

这是旧的：

HTML

<div class="col-md-12 col-sm-12 newForm" id="deleteSkill" style="display: block;">

 $scope.showDeleteForm = function () {
        $('#formSkill').hide(300);
        $('#formExp').hide(300);
        $('#initSkills').hide(300);
        $('#certifiedSkill').hide(300);

        if($scope.skillToDelete.length){
            $('#deleteSkill').show(300);
            setTimeout(function () {
                $('.yesno').show(200);
            }, 300);
        }
        else{
            $('#deleteSkill').hide(300);
            $('.yesno').hide(0);
        }

    };

我想避免使用 css，并在我的 TS 中添加类似“show(300)”的内容，但如果您对 css 也有想法，我将不胜感激。

【问题讨论】：

很抱歉这个问题，但你为什么要避免使用 css？那么 Angular 7 动画呢？
也是这么想的。你应该使用角度动画。 youtube.com/watch?v=nLRP8Uhx-Qo 不妨看看这个。
我只是在想类似“show(300)”的东西，但我不知道我是否可以，所以如果不可能，CSS 就可以了。我一直在寻找 AngAnimation 但它需要更多时间，如果没有其他解决方案我会考虑使用它@לבנימלכה
很好..这是什么this.skillsToDelete.push(skill);（是否需要回答）
你想要延迟还是动画？

标签： html css angular typescript animation

【解决方案1】：

当您要求不使用 css 时，您可以使用 angular-animation

See working example code

为ts导入animation并使用如下代码

在animate('1000ms 3000ms' 中设置动画时间（本例中为 1 秒）和延迟时间（本例中为 3 秒）

import { Component } from '@angular/core';
import sdk from '@stackblitz/sdk';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
        trigger('showAnimation', [
            transition(':enter', [
                style({opacity: 0}),
                animate('1000ms 3000ms', style({opacity: 1}))
            ]),
            transition(':leave', [
                state('invisible', style({opacity: 0})),
                style({opacity: 1}),
                animate('1000ms 3000ms', style({opacity: 0}))
            ])
        ])
    ],
})
export class AppComponent  {
skillsToDelete=false;
showCompDelete=false;
animationState="leave";

showFormDelete(skill) {
    this.showCompDelete = !this.showCompDelete;
    this.animationState=this.animationState=="enter"?'leave':'enter';
    // this.skillsToDelete.push(skill);
}
}

在 html 中使用 *ngIf 并使用如下代码：

<img *ngIf=  "!skillsToDelete"
 (click)="showFormDelete(skill)" title="Delete"
 class="cross"
 src="https://i.stack.imgur.com/B4Ha4.jpg">

 <div class="col-md-12 col-sm-12 newForm" id="deleteSkill" *ngIf="showCompDelete" [@showAnimation]="animationState"> 
 form with animation
 </div>

【讨论】：