SIGN IN SIGN UP
angular / angular.js UNCLAIMED

AngularJS - HTML enhanced for web apps!

0 0 189 JavaScript

fix(ngAnimate): force use of `ng-anchor` instead of a suffixed `-anchor` CSS class when triggering anchor animations

This fix changes anchored animations in ngAnimate to not append a series
of CSS classes with a `-suffix` prefix to the anchor element. Use
the `ng-anchor` instead CSS class instead.

BREAKING CHANGE: Prior to this fix there were to ways to apply CSS
animation code to an anchor animation. With this fix, the suffixed
CSS -anchor classes are now not used anymore for CSS anchor animations.

Instead just use the `ng-anchor` CSS class like so:

```html
<div class="container-animation" ng-if="on">
   <div ng-animate-ref="1" class="my-anchor-element"></div>
</div>

<div class="container-animation" ng-if="!on">
   <div ng-animate-ref="1" class="my-anchor-element"></div>
</div>
```

**before**:
```css
/* before (notice the container-animation CSS class) */
.container-animation-anchor {
  transition:0.5s linear all;
}
```

**now**:
```css
/* now (just use `ng-anchor` on a class that both the
   elements that contain `ng-animate-ref` share) */
.my-anchor-element.ng-anchor {
  transition:0.5s linear all;
}
```
M
Matias Niemelä committed
df24410c17d51a8d44929b9cffee2c91cedfed72
Parent: e6d053d