Как показать форму при нажатии с некоторой задержкой на Angular 7?
Мне нужно изменить некоторый код angularJS в Angular 7.
У меня есть функция, которая 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;">
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, я был бы признателен.
думал так же. вы должны использовать угловую анимацию. youtube.com/watch?v=nLRP8Uhx-Qo, возможно, посмотрит это.
Я просто думал о чем-то вроде этого "show(300)", но я не знаю, смогу ли я, поэтому, если это невозможно, CSS в порядке. Я искал AngAnimation, но это требует больше времени, очевидно, если нет другого решения, я рассмотрю возможность его использования @לבנימלכה
хорошо.. что это this.skillsToDelete.push(skill); (ответить обязательно)
вы хотите только с задержкой или с анимацией?
Мне нужно удалить навыки у пользователя, поэтому я должен нажать эти «выбранные навыки» в другом компоненте, который их удалит.
я бы предпочел анимацию, но только для запуска простой задержки.
что вы об этом думаете? какие-либо предложения? @לבנימלכה
Ответы 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>
извините за вопрос, но почему вы хотите избежать css? а как насчет анимации angular 7?