1.Angular5 animation has no effect after setting animate transition time
2. Code:
import { Component } from "@angular/core";
import { OverlayContainer } from "@angular/cdk/overlay";
import { trigger, state, transition, style, animate, keyframes } from "@angular/animations";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
animations: [trigger (
) "openClose",
[
state("collapsed, void", style({height: "0px", color: "maroon", borderColor: "maroon"})),
state("expanded", style({height: "*", borderColor: "green", color: "green"})),
transition(
"collapsed <=> expanded", [animate(500, style({height: "250px"})), animate(500)])
])],
constructor() {
this.collapse();
}
expand() { this.stateExpression = "expanded"; }
collapse() { this.stateExpression = "collapsed"; }3 is effective but not animated, regardless of whether it is given to 5000 or 500. why?