Skip to content
Permalink
Browse files

docs(ngAnimate): remove unnecessary transition prefixes

We can remove the vendor-prefixing from our docs, since all major browsers
support these properties, without prefixes.

Closes #14586
  • Loading branch information
peebeebee authored and petebacondarwin committed May 11, 2016
1 parent f34e341 commit 20e0c7f9660ddd06b6182e0156c3c3bf31d892b2
Showing with 20 additions and 41 deletions.
  1. +20 −41 docs/content/guide/animations.ngdoc
@@ -12,6 +12,13 @@ triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a
placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS
or with JavaScript code when it's defined as a factory.

<div class="alert alert-info">
Note that we have used non-prefixed CSS transition properties in our examples as the major browsers now support non-prefixed
properties. If you intend to support older browsers or certain mobile browsers then you will need to include prefixed
versions of the transition properties. Take a look at http://caniuse.com/#feat=css-transitions for what browsers require prefixes,
and https://github.com/postcss/autoprefixer for a tool that can automatically generate the prefixes for you.
</div>

Animations are not available unless you include the {@link ngAnimate `ngAnimate` module} as a dependency within your application.

Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
@@ -29,18 +36,17 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
</file>
<file name="animations.css">
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
padding: 10px;
border: 1px solid black;
background: white;
}

.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
transition: all linear 0.5s;
}

.sample-show-hide.ng-hide {
opacity:0;
opacity: 0;
}
</file>
</example>
@@ -80,11 +86,8 @@ occur when ngRepeat triggers them:
class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
transition: all 0.5s linear;
opacity: 0;
}

/*
@@ -95,7 +98,7 @@ occur when ngRepeat triggers them:
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
opacity:1;
opacity: 1;
}

/*
@@ -104,35 +107,14 @@ occur when ngRepeat triggers them:
that has the .repeated-item class
*/
.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
animation: 0.5s my_animation;
}

@keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
}

/*
Unfortunately each browser vendor requires
its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
}

@-moz-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
}

@-o-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
}
```

The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
@@ -217,10 +199,7 @@ The example below shows how to perform animations during class changes:
</file>
<file name="style.css">
.css-class-add, .css-class-remove {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
@@ -231,7 +210,7 @@ The example below shows how to perform animations during class changes:

.css-class-remove.css-class-remove-active {
font-size:1.0em;
color:black;
color: black;
}
</file>
</example>
@@ -317,8 +296,8 @@ app.config(function($animateProvider) {
```css
/&#42; prefixed with animate- &#42;/
.animate-fade-add.animate-fade-add-active {
transition:1s linear all;
opacity:0;
transition: all 1s linear;
opacity: 0;
}
```

0 comments on commit 20e0c7f

Please sign in to comment.
You can’t perform that action at this time.