Play CSS animation only once

Question

1.div container with animation (transition) when directive ( ng-show || ng-if ) display it.

2.Parent div which controlled by an external button (add style property display: none or display: block )

Have an issue:

How processing animation just once, when 1. - showed, but don't repeat it again if the parent becomes display: block from display: none .

Answer 1

Since your ng-show/ng-if is triggered by change of some condition, you can use a boolean to determine wheather the display is initial and set it in the same context.

Then you can use ng-class to add a class initial to your div and move the css-transition properties.

Like this:

HTML:

<div ng-class="{'initial': controller.initial}"></div>

CSS:

div.initial{
  transition: ...
}

JS/Controller:

functionThatSetsShowCondition(){
  controller.initial = true;
}