Can somebody explain the AngularJs animation nomenclature?

Question

I always struggle setting up AngularJS animations, either because I don't yet "get it"TM or because the nomenclature is reversed. I'm sure it's the former.

For example, the following CSS works, ie. the element flies in from the left on being shown, and flies back to the left when hidden.

.fly-from-left {
  transition:all linear 0.2s;
  left:4px
}

.fly-from-left.ng-hide-remove {   // this is the start point of the show animation
  left: -20px;
}
.fly-from-left.ng-hide {  // this is the endpoint of the hide animation
  left: -20px;
}

But what I don't get is why the selector responsible for the show animation is called ng-hide-remove. If somebody could illuminate the nomenclature, I'm gonna find setting up animations much easier in future.

Answer 1

Once an element is hidden by the ng-hide directive there's a css class called .ng-hide that gets applied to it.

I think of the class .ng-hide-remove as an animation that triggers when the .ng-hide class is removed.

See also

AngularJS also pays attention to CSS class changes on elements by triggering the add and remove hooks. This means that if a CSS class is added to or removed from an element then an animation can be executed in between before the CSS class addition or removal is finalized. (Keep in mind that AngularJS will only be able to capture class changes if an expression or the ng-class directive is used on the element.)

From the documentation

From that perspective, .ng-hide-remove makes sense.