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

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

如何在Angular 7上延迟显示Click上的表单？

1 个答案: