docs(animation): fix code example to work with most recent ngAnimate

ngAnimate: Rename CSS classes in example code to work with new ngAnimate naming conventions
ngInclude: Include animations toggle in ngInclude example code
ngAnimate: Remove ms- prefix and fix up CSS animation example code
This commit is contained in:
Matias Niemelä 2013-05-13 14:06:50 +01:00 committed by Pete Bacon Darwin
parent 3952d35abe
commit 3e4d43b42c
3 changed files with 11 additions and 12 deletions

View file

@ -61,9 +61,8 @@
* .animate-enter { * .animate-enter {
* -webkit-transition: 1s linear all; /* Safari/Chrome */ * -webkit-transition: 1s linear all; /* Safari/Chrome */
* -moz-transition: 1s linear all; /* Firefox */ * -moz-transition: 1s linear all; /* Firefox */
* -ms-transition: 1s linear all; /* IE10 */
* -o-transition: 1s linear all; /* Opera */ * -o-transition: 1s linear all; /* Opera */
* transition: 1s linear all; /* Future Browsers */ * transition: 1s linear all; /* IE10+ and Future Browsers */
* *
* /* The animation preparation code */ * /* The animation preparation code */
* opacity: 0; * opacity: 0;
@ -88,10 +87,10 @@
* <pre> * <pre>
* <style type="text/css"> * <style type="text/css">
* .animate-enter { * .animate-enter {
* -webkit-animation: enter_sequence 1s linear; * -webkit-animation: enter_sequence 1s linear; /&#42; Safari/Chrome &#42;/
* -moz-animation: enter_sequence 1s linear; * -moz-animation: enter_sequence 1s linear; /&#42; Firefox &#42;/
* -o-animation: enter_sequence 1s linear; * -o-animation: enter_sequence 1s linear; /&#42; Opera &#42;/
* animation: enter_sequence 1s linear; * animation: enter_sequence 1s linear; /&#42; IE10+ and Future Browsers &#42;/
* } * }
* &#64-webkit-keyframes enter_sequence { * &#64-webkit-keyframes enter_sequence {
* from { opacity:0; } * from { opacity:0; }

View file

@ -52,7 +52,7 @@
</span> </span>
</file> </file>
<file name="animations.css"> <file name="animations.css">
.example-leave-setup, .example-enter-setup { .example-leave, .example-enter {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -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; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@ -60,17 +60,17 @@
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;
} }
.example-enter-setup { .example-enter {
opacity:0; opacity:0;
} }
.example-enter-setup.example-enter-start { .example-enter.example-enter-active {
opacity:1; opacity:1;
} }
.example-leave-setup { .example-leave {
opacity:1; opacity:1;
} }
.example-leave-setup.example-leave-start { .example-leave.example-leave-active {
opacity:0; opacity:0;
} }
</file> </file>

View file

@ -33,7 +33,7 @@
* - Otherwise enable scrolling only if the expression evaluates to truthy value. * - Otherwise enable scrolling only if the expression evaluates to truthy value.
* *
* @example * @example
<example> <example animations="true">
<file name="index.html"> <file name="index.html">
<div ng-controller="Ctrl"> <div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates"> <select ng-model="template" ng-options="t.name for t in templates">