Skip to content

Commit e1fe2ac

Browse files
matskomhevery
matsko
authored and
mhevery
committed
chore(ngdocs): all animation-supported directives working with docs examples and jsFiddle/Plunkr pages
1 parent 33d45d8 commit e1fe2ac

9 files changed

Lines changed: 104 additions & 88 deletions

File tree

‎docs/components/angular-bootstrap/bootstrap-prettify.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ var DEPENDENCIES = {
77
'angular.js': 'http://code.angularjs.org/' + angular.version.full + '/angular.min.js',
88
'angular-resource.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-resource.min.js',
99
'angular-route.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-route.min.js',
10+
'angular-animate.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-animate.min.js',
1011
'angular-sanitize.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-sanitize.min.js',
1112
'angular-cookies.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-cookies.min.js'
1213
};
@@ -188,7 +189,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
188189
return {
189190
terminal: true,
190191
link: function(scope, element, attrs) {
191-
var modules = [],
192+
var modules = ['ngAnimate'],
192193
embedRootScope,
193194
deregisterEmbedRootScope;
194195

‎docs/src/templates/css/animations.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,6 @@
6464
height:0;
6565
}
6666

67-
.example-animate-container {
68-
position:relative;
69-
background:white;
70-
border:1px solid black;
71-
height:40px;
72-
overflow:hidden;
73-
}
74-
75-
.example-animate-container > div {
76-
padding:1em;
77-
}
78-
7967
.animate-container.animations-off * {
8068
-webkit-transition: none;
8169
-moz-transition: none;

‎src/ng/directive/ngClass.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,7 @@ function classDirective(name, selector) {
109109
<span ng-class="myVar">Sample Text</span>
110110
</file>
111111
<file name="style.css">
112-
.my-class-add,
113-
.my-class-remove {
112+
.my-class-add, .my-class-remove {
114113
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
115114
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
116115
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

‎src/ng/directive/ngIf.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,26 +47,31 @@
4747
<file name="index.html">
4848
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
4949
Show when checked:
50-
<span ng-if="checked" class="example-if">
50+
<span ng-if="checked" class="animate-if">
5151
I'm removed when the checkbox is unchecked.
5252
</span>
5353
</file>
5454
<file name="animations.css">
55-
.example-if.ng-enter,
56-
.example-if.ng-leave {
55+
.animate-if {
56+
background:white;
57+
border:1px solid black;
58+
padding:10px;
59+
}
60+
61+
.animate-if.ng-enter, .animate-if.ng-leave {
5762
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
5863
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
5964
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6065
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6166
}
6267
63-
.example-if.ng-enter,
64-
.example-if.ng-leave.ng-leave-active {
68+
.animate-if.ng-enter,
69+
.animate-if.ng-leave.ng-leave-active {
6570
opacity:0;
6671
}
6772
68-
.example-if.ng-enter.ng-enter-active,
69-
.example-if.ng-leave {
73+
.animate-if.ng-enter.ng-enter-active,
74+
.animate-if.ng-leave {
7075
opacity:1;
7176
}
7277
</file>

‎src/ng/directive/ngInclude.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,21 @@
7171
Content of template2.html
7272
</file>
7373
<file name="animations.css">
74+
.example-animate-container {
75+
position:relative;
76+
background:white;
77+
border:1px solid black;
78+
height:40px;
79+
overflow:hidden;
80+
}
81+
82+
.example-animate-container > div {
83+
padding:10px;
84+
}
85+
7486
.include-example.ng-enter, .include-example.ng-leave {
7587
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7688
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
77-
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7889
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7990
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
8091

‎src/ng/directive/ngRepeat.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,30 @@
127127
]">
128128
I have {{friends.length}} friends. They are:
129129
<input type="search" ng-model="q" placeholder="filter friends..." />
130-
<ul>
130+
<ul class="example-animate-container">
131131
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">
132132
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
133133
</li>
134134
</ul>
135135
</div>
136136
</file>
137137
<file name="animations.css">
138-
.animate-repeat {
138+
.example-animate-container {
139+
background:white;
140+
border:1px solid black;
141+
list-style:none;
142+
margin:0;
143+
padding:0;
144+
}
145+
146+
.example-animate-container > li {
147+
padding:10px;
148+
list-style:none;
149+
}
150+
151+
.animate-repeat.ng-enter,
152+
.animate-repeat.ng-leave,
153+
.animate-repeat.ng-move {
139154
-webkit-transition:all linear 0.5s;
140155
-moz-transition:all linear 0.5s;
141156
-o-transition:all linear 0.5s;
@@ -145,19 +160,25 @@
145160
.animate-repeat.ng-enter {
146161
line-height:0;
147162
opacity:0;
163+
padding-top:0;
164+
padding-bottom:0;
148165
}
149166
.animate-repeat.ng-enter.ng-enter-active {
150167
line-height:20px;
151168
opacity:1;
169+
padding:10px;
152170
}
153171
154172
.animate-repeat.ng-leave {
155173
opacity:1;
156174
line-height:20px;
175+
padding:10px;
157176
}
158177
.animate-repeat.ng-leave.ng-leave-active {
159178
opacity:0;
160179
line-height:0;
180+
padding-top:0;
181+
padding-bottom:0;
161182
}
162183
163184
.animate-repeat.ng-move { }

‎src/ng/directive/ngShowHide.js‎

Lines changed: 22 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -27,56 +27,42 @@
2727
Click me: <input type="checkbox" ng-model="checked"><br/>
2828
<div>
2929
Show:
30-
<span class="check-element example-show-hide" ng-show="checked">
30+
<div class="check-element animate-show" ng-show="checked">
3131
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
32-
</span>
32+
</div>
3333
</div>
3434
<div>
3535
Hide:
36-
<span class="check-element example-show-hide" ng-hide="checked">
36+
<div class="check-element animate-show" ng-hide="checked">
3737
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
38-
</span>
38+
</div>
3939
</div>
4040
</file>
4141
<file name="animations.css">
42-
.example-show-hide {
42+
.animate-show.ng-hide-add,
43+
.animate-show.ng-hide-remove {
4344
-webkit-transition:all linear 0.5s;
4445
-moz-transition:all linear 0.5s;
45-
-ms-transition:all linear 0.5s;
4646
-o-transition:all linear 0.5s;
4747
transition:all linear 0.5s;
48-
display:block;
49-
}
50-
.example-show-hide.ng-hide {
51-
display:none;
48+
display:block!important;
5249
}
5350
54-
.example-show-hide.ng-hide-remove {
55-
display:block;
51+
.animate-show.ng-hide-add.ng-hide-add-active,
52+
.animate-show.ng-hide-remove {
5653
line-height:0;
5754
opacity:0;
5855
padding:0 10px;
5956
}
60-
.example-show-hide.ng-hide-remove.ng-hide-remove-active {
61-
line-height:20px;
62-
opacity:1;
63-
padding:10px;
64-
border:1px solid black;
65-
background:white;
66-
}
6757
68-
.example-show-hide.ng-hide-add {
58+
.animate-show.ng-hide-add,
59+
.animate-show.ng-hide-remove.ng-hide-remove-active {
6960
line-height:20px;
7061
opacity:1;
7162
padding:10px;
7263
border:1px solid black;
7364
background:white;
7465
}
75-
.example-show-hide.ng-hide-add.ng-hide-add-active {
76-
line-height:0;
77-
opacity:0;
78-
padding:0 10px;
79-
}
8066
8167
.check-element {
8268
padding:10px;
@@ -132,55 +118,42 @@ var ngShowDirective = ['$animate', function($animate) {
132118
Click me: <input type="checkbox" ng-model="checked"><br/>
133119
<div>
134120
Show:
135-
<span class="check-element example-show-hide" ng-show="checked">
121+
<div class="check-element animate-hide" ng-show="checked">
136122
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
137-
</span>
123+
</div>
138124
</div>
139125
<div>
140126
Hide:
141-
<span class="check-element example-show-hide" ng-hide="checked">
127+
<div class="check-element animate-hide" ng-hide="checked">
142128
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
143-
</span>
129+
</div>
144130
</div>
145131
</file>
146132
<file name="animations.css">
147-
.example-show-hide {
133+
.animate-hide.ng-hide-add,
134+
.animate-hide.ng-hide-remove {
148135
-webkit-transition:all linear 0.5s;
149136
-moz-transition:all linear 0.5s;
150137
-o-transition:all linear 0.5s;
151138
transition:all linear 0.5s;
152-
display:block;
153-
}
154-
.example-show-hide.ng-hide {
155-
display:none;
139+
display:block!important;
156140
}
157141
158-
.example-show-hide.ng-hide-remove {
159-
display:block;
142+
.animate-hide.ng-hide-add.ng-hide-add-active,
143+
.animate-hide.ng-hide-remove {
160144
line-height:0;
161145
opacity:0;
162146
padding:0 10px;
163147
}
164-
.example-show-hide.ng-hide-remove.ng-hide-remove-active {
165-
line-height:20px;
166-
opacity:1;
167-
padding:10px;
168-
border:1px solid black;
169-
background:white;
170-
}
171148
172-
.example-show-hide.ng-hide-add {
149+
.animate-hide.ng-hide-add,
150+
.animate-hide.ng-hide-remove.ng-hide-remove-active {
173151
line-height:20px;
174152
opacity:1;
175153
padding:10px;
176154
border:1px solid black;
177155
background:white;
178156
}
179-
.example-show-hide.ng-hide-add.ng-hide-add-active {
180-
line-height:0;
181-
opacity:0;
182-
padding:0 10px;
183-
}
184157
185158
.check-element {
186159
padding:10px;

‎src/ng/directive/ngSwitch.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@
5151
</select>
5252
<tt>selection={{selection}}</tt>
5353
<hr/>
54-
<div
55-
class="example-animate-container animate-switch"
54+
<div class="animate-switch-container"
5655
ng-switch on="selection">
5756
<div ng-switch-when="settings">Settings Div</div>
5857
<div ng-switch-when="home">Home Span</div>
@@ -67,7 +66,20 @@
6766
}
6867
</file>
6968
<file name="animations.css">
70-
.animate-switch > * {
69+
.animate-switch-container {
70+
position:relative;
71+
background:white;
72+
border:1px solid black;
73+
height:40px;
74+
overflow:hidden;
75+
}
76+
77+
.animate-switch-container > div {
78+
padding:10px;
79+
}
80+
81+
.animate-switch-container > .ng-enter,
82+
.animate-switch-container > .ng-leave {
7183
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7284
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7385
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@@ -80,22 +92,17 @@
8092
bottom:0;
8193
}
8294
83-
.example-animate-container > * {
84-
display:block;
85-
padding:10px;
86-
}
87-
88-
.animate-switch > .ng-enter {
95+
.animate-switch-container > .ng-enter {
8996
top:-50px;
9097
}
91-
.animate-switch > .ng-enter.ng-enter-active {
98+
.animate-switch-container > .ng-enter.ng-enter-active {
9299
top:0;
93100
}
94101
95-
.animate-switch > .ng-leave {
102+
.animate-switch-container > .ng-leave {
96103
top:0;
97104
}
98-
.animate-switch > .ng-leave.ng-leave-active {
105+
.animate-switch-container > .ng-leave.ng-leave-active {
99106
top:50px;
100107
}
101108
</file>

‎src/ngRoute/directive/ngView.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,21 @@ ngRouteModule.directive('ngView', ngViewFactory);
6161
</file>
6262
6363
<file name="animations.css">
64-
.view-example {
64+
.example-animate-container {
65+
position:relative;
66+
background:white;
67+
border:1px solid black;
68+
height:40px;
69+
overflow:hidden;
70+
}
71+
72+
.example-animate-container > div {
73+
padding:10px;
74+
}
75+
76+
.view-example.ng-enter, .view-example.ng-leave {
6577
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
6678
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
67-
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
6879
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
6980
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
7081

0 commit comments

Comments
 (0)