如何在Angular 7上显示一个表单，但有一些延迟？

Question

我必须在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 DELETE COMPONENT

<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导入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>