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

Animation Performance Fixes #4372

Closed
wants to merge 7 commits into from
Closed

Animation Performance Fixes #4372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d1c983e
refactor($animate): avoid checking for transition/animation support d…
matsko Oct 3, 2013
055fd4c
fix($animate): ensure elapsedTime always considers delay values
matsko Oct 3, 2013
c12c02f
fix($animate): cancel any ongoing child animations during move and le…
matsko Oct 10, 2013
e8bd341
refactor($animate): queue all successive animations to use only one r…
matsko Oct 7, 2013
21e1a66
fix($animate): ensure structural animations skip all child animations…
matsko Oct 9, 2013
a465f8f
chore(ngdocs): improve the side search animation effects
matsko Oct 8, 2013
ddcbf76
fix($animate): perform internal caching on getComputedStyle to boost …
matsko Oct 9, 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
34 changes: 23 additions & 11 deletions docs/src/templates/css/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,21 @@
}

.expand.ng-enter,
.expand.ng-move,
.expand.ng-leave {
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
}
.expand.ng-move,
.expand.ng-enter {
opacity:0;
line-height:0;
height:0!important;
}
.expand.ng-enter.expand.ng-enter-active {
.expand.ng-move.ng-move-active,
.expand.ng-enter.ng-enter-active {
opacity:1;
line-height:20px;
height:20px!important;
Expand All @@ -59,12 +62,17 @@
opacity:1;
height:20px;
}
.expand.ng-leave.expand.ng-leave-active {
.expand.ng-leave.ng-leave-active {
opacity:0;
height:0;
}

.fade-in.ng-enter,
.fade-in.ng-move,
.fade-in.ng-hide-add,
.fade-in.ng-hide-remove,
.foldout.ng-enter,
.foldout.ng-move,
.foldout.ng-hide-add,
.foldout.ng-hide-remove {
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
Expand All @@ -73,20 +81,24 @@
transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
}

.fade-in.ng-enter,
.fade-in.ng-move,
.fade-in.ng-hide-remove,
.fade-in.ng-hide-add.ng-hide-active,
.foldout.ng-hide-remove,
.foldout.ng-enter {
.foldout.ng-hide-add.ng-hide-active,
.foldout.ng-enter,
.foldout.ng-move {
opacity:0;
}

.fade-in.ng-enter.ng-enter-active,
.fade-in.ng-move.ng-move-active,
.fade-in.ng-hide-remove.ng-hide-remove-active,
.fade-in.ng-hide-add,
.foldout.ng-move.ng-move-active,
.foldout.ng-hide-remove.ng-hide-remove-active,
.foldout.ng-hide-add,
.foldout.ng-enter.ng-enter-active {
opacity:1;
}

.foldout.ng-hide-add {
opacity:1;
}

.foldout.ng-hide-add.ng-hide-active {
opacity:0;
}
10 changes: 5 additions & 5 deletions docs/src/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,22 +272,22 @@ <h4>{{ key }}</h4>
<div ng-show="search">Filtered results:</div>

<ul class="nav nav-list" ng-hide="page">
<li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
<li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
</ul>

<ul class="nav nav-list well api-list-item" ng-repeat="namespace in namespaces track by namespace.url">
<ul class="nav nav-list well api-list-item fade-in" ng-repeat="namespace in namespaces track by namespace.url">
<li class="nav-header module">
<a class="code" href="{{namespace.url}}">{{namespace.name}}</a>
</li>

<li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
<li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
</ul>

<ul class="nav nav-list well api-list-item" ng-repeat="module in modules track by module.url">
<ul class="nav nav-list well api-list-item fade-in" ng-repeat="module in modules track by module.url">
<li class="nav-header module">
<a class="guide" href="{{URL.module}}">module</a>
<a class="code" href="{{module.url}}">{{module.name}}</a>
Expand Down Expand Up @@ -326,7 +326,7 @@ <h4>{{ key }}</h4>
<a href="{{URL.api}}" class="global guide">global APIs</a>
&nbsp;
</li>
<li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
<li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.id}}</a>
</li>

Expand Down
Loading