html - 如何在 Angular 7 上延迟显示点击表单？

Question

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

我有一个函数，可以让 onClick 在主要表单的底部显示一个新表单。

HTML

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

typescript

    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;">

JS

 $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 也有想法，我将不胜感激。

Answer 1

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

See working example code

为ts导入动画，使用代码如下

在 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="/image/B4Ha4.jpg">

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