Variables in animation in Angular 2+
I am using some animations for my angular2 + component. It works great, but I want to use some variables instead of hardcoded values ('20px', '10px').
Is it possible to use some typescript variables in animations?
For example:
@Component({
selector: 'animationDialog',
templateUrl: './animationDialog.component.html',
styleUrls: ['./modal.component.css'],
animations: [
trigger('dialog', [
state('enter', style({
transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
top: 'this.TYPESCRIPTVAR3',
height: 'this.TYPESCRIPTVAR4'
})),
('leave', style({
transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
top: 'this.TYPESCRIPTVAR3',
height: 'this.TYPESCRIPTVAR4'
}))
Current code:
animations: [
trigger('dialog', [
state('enter', style({
transform: 'translate(0px, -80px)',
top: '200px',
height: '320px'
}))
I already checked another question , but this problem only applies to one type of variables. In my case, I have a variable style for one property (like "background-color"), but that property is a variable in different states.
Thank.
source to share
tellxp is correct. Unfortunately, this goes for styles, but also for duration, delay and decay. These and styles should be regular lines or numbers.
What you need to do is work with variables in the template itself using
[style.background-color]="yourVarHere";
Change var in js and take care of animation in your CSS.
.your-selector {
background-color: #333; /* your default color */
transition: 300ms background-color;
}
Or, if you want to take care of this in your animation component, use style:
{background-color: '*'}
to read the current color.
Hope this helps!
source to share