Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Animation Fixes #4742

Closed
wants to merge 3 commits into from
Closed

Animation Fixes #4742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a71f6ac
feat($animate): ensure CSS transitions can work with inherited CSS cl…
matsko Nov 4, 2013
3adbe3a
chore(docs): update $animate and ngAnimate docs
matsko Nov 6, 2013
884dc6d
chore(docs): refactor/improve new CSS transition code in examples
matsko Nov 6, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions src/ng/directive/ngClass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,26 +160,17 @@ function classDirective(name, selector) {
<input type="button" value="set" ng-click="myVar='my-class'">
<input type="button" value="clear" ng-click="myVar=''">
<br>
<span ng-class="myVar">Sample Text</span>
<span class="base-class" ng-class="myVar">Sample Text</span>
</file>
<file name="style.css">
.my-class-add, .my-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;
.base-class {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.my-class,
.my-class-add.my-class-add-active {
.base-class.my-class {
color: red;
font-size:3em;
}

.my-class-remove.my-class-remove-active {
font-size:1.0em;
color:black;
}
</file>
<file name="scenario.js">
it('should check ng-class', function() {
Expand Down
9 changes: 5 additions & 4 deletions src/ng/directive/ngIf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@
padding:10px;
}

/&#42;
The transition styles can also be placed on the CSS base class above
&#42;/
.animate-if.ng-enter, .animate-if.ng-leave {
-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;
}

Expand All @@ -71,8 +72,8 @@
opacity:0;
}

.animate-if.ng-enter.ng-enter-active,
.animate-if.ng-leave {
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
opacity:1;
}
</file>
Expand Down
20 changes: 9 additions & 11 deletions src/ng/directive/ngInclude.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div class="example-animate-container">
<div class="include-example" ng-include="template.url"></div>
<div class="slide-animate-container">
<div class="slide-animate" ng-include="template.url"></div>
</div>
</div>
</file>
Expand All @@ -71,22 +71,20 @@
Content of template2.html
</file>
<file name="animations.css">
.example-animate-container {
.slide-animate-container {
position:relative;
background:white;
border:1px solid black;
height:40px;
overflow:hidden;
}

.example-animate-container > div {
.slide-animate {
padding:10px;
}

.include-example.ng-enter, .include-example.ng-leave {
.slide-animate.ng-enter, .slide-animate.ng-leave {
-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;

position:absolute;
Expand All @@ -98,17 +96,17 @@
padding:10px;
}

.include-example.ng-enter {
.slide-animate.ng-enter {
top:-50px;
}
.include-example.ng-enter.ng-enter-active {
.slide-animate.ng-enter.ng-enter-active {
top:0;
}

.include-example.ng-leave {
.slide-animate.ng-leave {
top:0;
}
.include-example.ng-leave.ng-leave-active {
.slide-animate.ng-leave.ng-leave-active {
top:50px;
}
</file>
Expand Down
40 changes: 13 additions & 27 deletions src/ng/directive/ngRepeat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,49 +140,35 @@
border:1px solid black;
list-style:none;
margin:0;
padding:0;
padding:0 10px;
}

.example-animate-container > li {
padding:10px;
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave,
.animate-repeat.ng-move {
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
line-height:0;
opacity:0;
padding-top:0;
padding-bottom:0;
}
.animate-repeat.ng-enter.ng-enter-active {
line-height:20px;
opacity:1;
padding:10px;
max-height:0;
}

.animate-repeat.ng-leave {
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
line-height:20px;
padding:10px;
max-height:40px;
}
.animate-repeat.ng-leave.ng-leave-active {
opacity:0;
line-height:0;
padding-top:0;
padding-bottom:0;
}

.animate-repeat.ng-move { }
.animate-repeat.ng-move.ng-move-active { }
</file>
<file name="scenario.js">
it('should render initial data set', function() {
Expand Down
52 changes: 22 additions & 30 deletions src/ng/directive/ngShowHide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,31 +100,27 @@
</div>
</file>
<file name="animations.css">
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
.animate-show {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}

.animate-show.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}

.check-element {
padding:10px;
border:1px solid black;
Expand Down Expand Up @@ -253,31 +249,27 @@ var ngShowDirective = ['$animate', function($animate) {
</div>
</file>
<file name="animations.css">
.animate-hide.ng-hide-add,
.animate-hide.ng-hide-remove {
.animate-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}

.animate-hide.ng-hide-add.ng-hide-add-active,
.animate-hide.ng-hide-add,
.animate-hide.ng-hide-remove {
display:block!important;
}

.animate-hide.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}

.animate-hide.ng-hide-add,
.animate-hide.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}

.check-element {
padding:10px;
border:1px solid black;
Expand Down
26 changes: 9 additions & 17 deletions src/ng/directive/ngSwitch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
<hr/>
<div class="animate-switch-container"
ng-switch on="selection">
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>default</div>
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
</div>
</file>
Expand All @@ -75,15 +75,12 @@
overflow:hidden;
}

.animate-switch-container > div {
.animate-switch {
padding:10px;
}

.animate-switch-container > .ng-enter,
.animate-switch-container > .ng-leave {
.animate-switch.ng-animate {
-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;

position:absolute;
Expand All @@ -93,19 +90,14 @@
bottom:0;
}

.animate-switch-container > .ng-enter {
.animate-switch.ng-leave.ng-leave-active,
.animate-switch.ng-enter {
top:-50px;
}
.animate-switch-container > .ng-enter.ng-enter-active {
.animate-switch.ng-leave,
.animate-switch.ng-enter.ng-enter-active {
top:0;
}

.animate-switch-container > .ng-leave {
top:0;
}
.animate-switch-container > .ng-leave.ng-leave-active {
top:50px;
}
</file>
<file name="scenario.js">
it('should start in settings', function() {
Expand Down
Loading