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

fix(ngdocs): improve the animations used in the docs menu

Browse source
This commit is contained in:
Matias Niemelä 2013-04-04 08:49:04 -04:00 committed by Misko Hevery
parent a0bc71e271
commit 3c3247fe17
3 changed files with 45 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,6 @@
.reveal-setup {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-ms-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
@ -11,45 +10,55 @@
opacity:1;
}
.nav-list li {
height:20px;
overflow:hidden;
}
.slide-reveal-setup {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-ms-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0.5;
}
.slide-reveal-setup.slide-reveal-start {
opacity:1;
}
.slide-enter-setup {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-ms-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
position:relative;
left:10px;
opacity:0;
top:10px;
}
.slide-enter-setup.slide-enter-start {
left:0;
.slide-reveal-setup.slide-reveal-start {
top:0;
opacity:1;
}
.slide-leave-setup {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-ms-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
.expand-enter-setup {
-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;
opacity:0;
line-height:0;
height:0!important;
}
.expand-enter-setup.expand-enter-start {
opacity:1;
line-height:20px;
height:20px!important;
}
.expand-leave-setup {
-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;
opacity:1;
height:20px;
}
.slide-leave-setup.slide-leave-start {
.expand-leave-setup.expand-leave-start {
opacity:0;
height:0;
}
.example-animate-container {
@ -67,7 +76,6 @@
.animator-container.animations-off * {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: color 0 ease-in; /* opera is special :) */
transition: none;
}

7
docs/src/templates/css/docs.css
View file

@ -56,7 +56,12 @@ img.AngularJS-small {
}
.form-search > ul.nav > li.last {
margin-bottom: 1em;
padding-bottom: 1em;
}
.form-search > ul.nav > li.last + li.api-list-item {
margin-top:-1em;
padding-bottom: 1em;
}
.form-search .well {

14
docs/src/templates/index.html
View file

@ -217,13 +217,13 @@
<div ng-show="search">Filtered results:</div>
<ul class="nav nav-list" ng-hide="page">
<li ng-repeat="page in pages" ng-class="navClass(page)">
<li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
</ul>
<ul class="nav nav-list well" ng-repeat="module in modules">
<ul class="nav nav-list well" ng-repeat="module in modules track by module.url" class="api-list-item">
<li class="nav-header module">
<a class="guide" href="{{URL.module}}">module</a>
<a class="code" href="{{module.url}}">{{module.name}}</a>
@ -232,21 +232,21 @@
<li class="nav-header section" ng-show="module.directives">
<a href="{{URL.directive}}" class="guide">directive</a>
</li>
<li ng-repeat="page in module.directives" ng-class="navClass(page)" ng-animate="'slide'">
<li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.filters">
<a href="{{URL.filter}}" class="guide">filter</a>
</li>
<li ng-repeat="page in module.filters" ng-class="navClass(page)" ng-animate="'slide'">
<li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.services">
<a href="{{URL.service}}" class="guide">service</a>
</li>
<li ng-repeat="service in module.services" ng-animate="'slide'" ng-class="navClass(service.instance, service.provider)">
<li ng-repeat="service in module.services track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
<a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
<a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
</li>
@ -254,7 +254,7 @@
<li class="nav-header section" ng-show="module.types">
<a href="{{URL.type}}" class="guide">Types</a>
</li>
<li ng-repeat="page in module.types" ng-class="navClass(page)" ng-animate="'slide'">
<li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
@ -262,7 +262,7 @@
<a href="{{URL.api}}" class="global guide">global APIs</a>
&nbsp;
</li>
<li ng-repeat="page in module.globals" ng-class="navClass(page)">
<li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.id}}</a>
</li>