Как вызвать эффект fadeInRight с помощью angular 6
Я хотел бы реализовать в машинописи триггер с использованием анимации fadeInRight.
Я реализовал триггер, но постепенное появление и исчезновение.
Не могли бы вы мне помочь?
следуйте моему коду ниже:
trigger('fade', [
state('in', style({
opacity: 1
})),
state('out', style({
opacity: 0
})),
transition('in => out', animate('0ms ease-out')),
transition('out => in', animate('500ms ease-in'))
])
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использовать пакет ng-animate для анимации
Для запуска эффекта FadeInRight выполните следующие действия.
Установить npm-пакет
npm install ng-animate --saveИмпортируйте
BrowserAnimationsModuleв свойapp.module.tsфайлimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';В вашем
component.tsфайле импортируйте@angular/animationsмодуль иng-animateмодульimport { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';Ваш
ComponentName.tsфайл в метаданные@Componentдобавьте следующий кодanimations: [ trigger('fadeInRight', [transition('* => *', useAnimation(fadeInRight, { // Set the duration to 5seconds and delay to 2seconds params: { timing: 5, delay: 2 } }))]) ]В вашем файле
ComponentName.htmlдобавьте следующий код<h1 [@fadeInRight] = "fadeInRight">Here FadeInRight animation working..</h1>
@Andre, извините за поздний ответ, но это действительно полезно для вас. его работа, как и ожидалось. если у вас все еще есть проблема, скажите мне, что я рад вам помочь.
Я очень рад помочь вам. Спасибо @Андре
Большое спасибо!
но я хотел бы реализовать "исчезновение справа" и "исчезновение слева"