Stack Overflow Asked by Frank Nocke on December 24, 2020
I want to animate a base object and its children:
<div class="wrap"
[@anim1]="anim1" [@anim2]="anim2"
(@anim1.start)="onAnimationEvent($event)"
(@anim1.done)="onAnimationEvent($event)"
>
<button [class.active]="anim1" (click)="toggleAnim1()">Anim 1</button>
<button [class.active]="anim2" (click)="toggleAnim2()">Anim 2</button>
<hr>
<b class='b'>B</b>
<b class='b'>B</b>
<b class='b'>B</b>
<b class='b'>B</b>
</div>
import { Component } from '@angular/core';
import { trigger, transition, group, query, style, animate, keyframes, state } from '@angular/animations';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [
trigger('anim1', [
state('true', style({
border: '10px solid pink',
backgroundColor: 'purple',
})),
state('false', style({
border: '10px solid lime',
backgroundColor: 'green',
})),
transition('true => false', [
animate('1s linear')
]),
transition('false => true', [
animate('.2s linear')
]),
]),
trigger('anim2', [
transition('* => false', [
query('b', animate( 1000, style({ border: '12px solid cyan' })))
]),
transition('* => true', [
query('b', animate( 1000, style({ border: '4px solid red' })))
]),
])
] // animations
})
export class AppComponent {
anim1 = false;
anim2 = false;
toggleAnim1() {
this.anim1 = !this.anim1;
}
toggleAnim2() {
this.anim2 = !this.anim2;
}
ngOnInit() {
}
}
<b>
tags however does not work as expected: Sure, for the time of the transition the color changes (to red-ish resp. blue-ish colors), but before and after it abruptly snaps back to the default color (white border around).So, it’s neithing coming from nor going to its final animation state, so-to-speak.
What am I doing wrong?
I did notice, that I put the b-styles within a query within transition (based on stuff I have seen), is there a way, to put them inside a state()
?
Can I combine the main-object animation (anim1) and child animation (anim2)? (In the most simple, toggle-forth-and-back-style way. One variable to forth-and-back ’em all…)
I did notice, that upon reload also the main object sometimes has its (prior-to-animation) css base colors briefly appearing…
If I could I would indeed want to start on everything with the .css
-defined colors, thus only have to specify “the other state” (the active one) within the component source, avoiding to replicating the css Styles for “back-to-normal”. Is that possible?
Should I maybe not start with false
but with undefined, and/or do something (grouped?) along the lines of * <=> true, false <=> true
?
First of all, This is a bad practice to implement/handle entire of animations with angular. Keep it simple and let css rules do most of the things. Just do the tricks in Angular in order to reduce lines of code, Although it can implement or handle almost everything. In this way, you create a custom animation (@-webkit-keyframes
), css rules for the animation, parent, children, and just control the assignment with angular animation.
To enhance your understanding, just spend a little time on Angular animation which describes basics. For better understanding additional methods:
query
finds one or more inner elements within the current
element that is being animated within a sequence. Use with
animate()
transition
and trigger
sNow lets discuss about existing problems in you code. the query selector query('b',
works but the animation
method used incorrectly, As you can see in my fork works for a cubic-bezier
.
In case of ordered animations, for example, animating nested elements inside parent, take advantage of animateChild
:
Each time an animation is triggered in Angular, the parent animation has priority and any child animations are blocked. In order for a child animation to run, the parent animation must
query
each of the elements containing child animations, and run them using this function.
Answered by Amirhossein Mehrvarzi on December 24, 2020
You cannot achieve it as you thought. There is a limitation between the Parent > child relation. Please see this ticket: https://github.com/angular/angular/issues/18775
The recommended way to achieve this is the following:
Add a @child
to each element and specify it's end state
<span [@child]="{value:'yes/no', params: { opacity: 0.5 }}"></span>
Answered by Pablo on December 24, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP