Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(ngdocs): improve the side search animation effects

Browse source
This commit is contained in:
Matias Niemelä 2013-10-08 13:13:10 -04:00 committed by Misko Hevery
parent cc5846073e
commit 1438f1b626
2 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
docs/src/templates/css/animations.css
View file

@ -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;
@ -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;
@ -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
docs/src/templates/index.html
View file

@ -272,22 +272,22 @@
<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>
@ -326,7 +326,7 @@
<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>