site, click to the right to display one page and to the left to display another page. I really don"t know how to write the class file in the hero component, and the big god can help.
Code in the animation class file:
import {animate, state, style, transition, trigger} from"@ angular/animations";
class AnimationAnimateMetadata {
}
export const slideInDownAnimation: AnimationAnimateMetadata =
trigger ("routeAnimation", [
state("*",
style({
opacity: 1,
transform: "translateX(0)"
})
),
transition(":enter", [
style({
opacity: 0,
transform: "translateX(-100%)"
}),
animate("0.2s ease-in")
]),
transition(":leave", [
animate("0.5s ease-out", style({
opacity: 0,
transform: "translateY(100%)"
}))
])]);
The code in the hero component template:
< div [@ routeAnimation] = "routeAnimation" class= "my-5" >
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
< / div >
Code in the hero component class file:
import {Component, OnInit, HostBinding} from"@ angular/core";
@ Component ({
selector: "app-hero",
templateUrl:". / hero.component.html",
styleUrls: [". / hero.component.css"],
})
export class HeroComponent implements OnInit {
@ HostBinding ("@ routeAnimation") routeAnimation = true;
@ HostBinding ("style.display") display =" block";
@ HostBinding ("style.position") position =" absolute";
constructor () {
}
ngOnInit () {
}
}
File structure:
