Как показать форму на клике с некоторой задержкой на Angular 7?

Question

Мне нужно изменить код angularJS в Angular 7.

У меня есть функция, которая показывает 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 и добавить что-токак "show (300)" в моем TS, но если у вас есть идеи и в css, я был бы признателен.

Answer 1

Когда вы просите не использовать css, вы можете использовать angular-animation

См. Рабочий пример кода

Импорт animation для 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="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>