Angular 2+ Enter animation on child component works but leave does not

Question

i have a sub component like this

@Component({
selector: 'is-time-controlled',
templateUrl: './is-time-controlled.html',
styleUrls: ['./is-time-controlled.less'],
animations: [
    trigger(
        'myAnimation',
        [
            transition(
                ':enter', [
                    style({ transform: 'translateX(100%)', opacity: 0 }),
                    animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))
                ]
            ),
            transition(
                ':leave', [
                    style({ transform: 'translateX(0)', opacity: 1 }),
                    animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))
                ]
            )
        ]
    )
]

})

and the sub component has a template with first div like this

<div class="card card-padding" [@myAnimation]>

parent component has *ngIf

 <is-time-controlled  *ngIf="somelogic"> </is-time-controlled>

when logic is true i see enter animation but when logic becomes false i dont see leaving animation.

i see various opened issues. do we have a fix for this?

You need to put the animation on the is-time-controlled component. — smoyer, Nov 17 '17 at 19:11
yes it is there. and [@myAnimation] is on the first div of "is-time-controlled" — Raas Masood, Nov 17 '17 at 19:13

Terry Pitz · Answer 1 · 2017-11-17T01:09:15.327

0

I suggest you to try like this:

animations: [trigger('myAnimation', [
            state('enter', style({
                transform: 'translateX(100%)';
                opacity: '0';
            })),
            state('leave', style({
                transform: 'translateX(0)';
                opacity: '1';
            })),
            transition('enter <=> leave', [animate(500)])
        ]
    )]

This creates two states. All you have to do now is to create a variable to fetch the state, right after changing 'somelogic' to true/false

export class AppComponent implements OnInit {

    public state: string;
    public somelogic: boolean;

    function1(): any {
        this.somelogic = true;
        this.state = 'enter';
    }

    function2(): any {
        this.somelogic = false;
        this.state = 'leave';
    }
}

In your HTML

<div class="card card-padding" [@myAnimation]="state">

Hope it helps

edited Nov 17 '17 at 01:09

answered Nov 17 '17 at 00:39

Terry Pitz

83
7

somelogic is in parent so where should i create the "state" variable? . [@myAnimation]="state" is in child component's first
how will it know what is "state"
– Raas Masood Nov 17 '17 at 00:54
I changed the response, didn't see you were not using state(). If you create a state variable in your component (which is rendering your HTML), you can use it in HTML (if it's declared as public) – Terry Pitz Nov 17 '17 at 01:11
so i created "state" string object in parent component and setting it "enter" and "leave" appropriately but no animation is working now. looking into it ... – Raas Masood Nov 17 '17 at 01:31
and ";" in the code you wrote were actually "," in my case as that is an object properties. – Raas Masood Nov 17 '17 at 01:32
state is not boolean but a string ! 'somelogic' is the boolean you were using from the beginning – Terry Pitz Nov 17 '17 at 01:35
yeah sorry that was typo :) – Raas Masood Nov 17 '17 at 01:35
and you used state() method instead of transition() ? – Terry Pitz Nov 17 '17 at 01:38
yes exactly same code and one transition at the end like in your code. – Raas Masood Nov 17 '17 at 01:38
https://stackoverflow.com/questions/45085604/angular-animation-leave-transition-on-child-div this said that angular does not play leave animation. – Raas Masood Nov 17 '17 at 01:45
U_U i'll note that,n you don't have to put it into a *ngIf. You can still make it disappear with css in your animation, ending up with a display:none; – Terry Pitz Nov 17 '17 at 01:48

Angular 2+ Enter animation on child component works but leave does not

1 Answers1

Linked