CODEWITHSUNDEEP
javascripthtmlcssangularangular-ng-if
felixo
felixo

Reputation: 1613

Rendering JS after CSS transition in Angular

So I have a button, when clicked the onGoToAbout function is called. This function sets an elements height to 0 and also sets the desk boolean variable to false. This variable is connected to an elements *ngIf.

My problem is that the *ngIf is executed before my CSS transition takes place. I'm thinking I need a delay of sorts but can't figure out how to implement that!

Below is my code. Using jQuery is not an option. 

onGoToAbout(event) {
 document.getElementById("slideshow").style.height = "0vh";
        this.desk = false;
    }

Upvotes: 0

Views: 96

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26400

Simply delay this.desk = false with a timeout :

setTimeout( () => { this.desk = false }, 500 )

This way, your CSS transition will perform, then, after 500ms, the variable will be set to false.

Also, of course jQuery is not an option in an Angular app :) document.getElementById shouldn't even be used, as it's not angular-y, but let's say that if it's done only to perform a CSS transition, it's okay.

Upvotes: 2

Related Questions