diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc index ff04a0435607..db4510d269a3 100644 --- a/docs/content/guide/animations.ngdoc +++ b/docs/content/guide/animations.ngdoc @@ -29,18 +29,17 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`: .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; } @@ -80,11 +79,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 +91,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,10 +100,7 @@ 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 { @@ -115,24 +108,6 @@ occur when ngRepeat triggers them: 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 +192,7 @@ The example below shows how to perform animations during class changes: .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 +203,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; } @@ -317,8 +289,8 @@ app.config(function($animateProvider) { ```css /* prefixed with animate- */ .animate-fade-add.animate-fade-add-active { - transition:1s linear all; - opacity:0; + transition: all 1s linear; + opacity: 0; } ```