jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix sidebar animation (#14)

Browse source
This commit is contained in:
cinwell.li 2016-11-29 23:09:59 +08:00 • committed by GitHub
commit 19bf043cf8
6 changed files with 132 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
404.dev.html
View file

@ -8,5 +8,5 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>
<script src="/lib/docsify.js" data-repo="https://qingwei-li/docsify" data-sidebar-toggle></script> <script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-sidebar-toggle data-load-navbar></script>
</html> </html>

6
CHANGELOG.md
View file

@ -1,3 +1,9 @@
## 0.6.1
### Bug fixes
- In the mobile, it should collapse the sidebar when toggle is clicked.
- Fix the dropdown list style.
- Fix sidebar animation.
## 0.6.0 ## 0.6.0
### Features ### Features
- Navbar support dropdown list, #6 - Navbar support dropdown list, #6

9
src/event.js
View file

@ -77,7 +77,12 @@ export function activeLink (dom, activeParent) {
export function bindToggle (dom) { export function bindToggle (dom) {
dom = typeof dom === 'object' ? dom : document.querySelector(dom) dom = typeof dom === 'object' ? dom : document.querySelector(dom)
if (!dom) return if (!dom) return
const main = document.querySelector('main') const body = document.body
dom.addEventListener('click', () => main.classList.toggle('close')) dom.addEventListener('click', () => body.classList.toggle('close'))
if (!/mobile/i.test(navigator.userAgent)) return
document.querySelector('aside').addEventListener('click', event => {
body.classList.toggle('close')
})
} }

65
themes/buble.css
View file

@ -17,7 +17,7 @@ nav {
right: 0; right: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
margin: 25px 60px 0 0; margin: 15px 60px 0 0;
text-align: right; text-align: right;
} }
@ -32,36 +32,41 @@ nav li {
} }
nav li ul { nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
border: 1px solid #0074D9; border: 1px solid #0074D9;
right: 0;
overflow: hidden;
opacity: 0; opacity: 0;
overflow-y: auto; overflow: hidden;
transition: opacity .3s ease, max-height .5s ease; padding: 0;
position: absolute;
right: 0;
top: 26px;
transform-origin: 100% 0%;
transform: scale(1, 0);
transition: opacity .4s ease-out, transform .2s ease;
transition-delay: .3s;
} }
nav li:hover ul { nav li:hover ul {
opacity: 1; opacity: 1;
max-height: 100px; transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
} }
nav li ul li { nav li ul li {
display: block; display: block;
}
nav li ul a {
display: block;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 4px 10px; padding: 4px 10px;
white-space: nowrap; white-space: nowrap;
} }
nav li ul a {
display: block;
padding: 0;
margin: 0;
}
nav li ul a.active { nav li ul a.active {
border-bottom: 0; border-bottom: 0;
} }
@ -89,7 +94,7 @@ nav a.active {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 10; z-index: 1;
} }
.github-corner svg { .github-corner svg {
@ -132,6 +137,7 @@ body {
font-size: 15px; font-size: 15px;
letter-spacing: 0; letter-spacing: 0;
margin: 0; margin: 0;
overflow-x: hidden;
} }
/* main */ /* main */
@ -154,7 +160,7 @@ main {
z-index: 1; z-index: 1;
padding-top: 40px; padding-top: 40px;
left: 0; left: 0;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
.sidebar ul { .sidebar ul {
@ -221,14 +227,13 @@ main {
top: 0; top: 0;
overflow-x: hidden; overflow-x: hidden;
padding-top: 20px; padding-top: 20px;
transition: left 250ms ease;
} }
main.close .sidebar { body.close .sidebar {
left: -16em; transform: translateX(-16em);
} }
main.close .content { body.close .content {
left: 0; left: 0;
} }
@ -243,21 +248,29 @@ main.close .content {
.sidebar { .sidebar {
left: -16em; left: -16em;
transition: left 250ms ease; transition: transform 250ms ease;
} }
.content { .content {
left: 0; left: 0;
min-width: 100vw; min-width: 100vw;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
main.close .sidebar { body.close .sidebar {
left: 0; transform: translateX(16em);
} }
main.close .content { body.close .content {
left: 16em; transform: translateX(16em);
}
nav, .github-corner {
transition: transform 250ms ease-out;
}
body.close nav,
body.close .github-corner {
transform: translateX(16em);
} }
} }

62
themes/pure.css
View file

@ -15,7 +15,7 @@ nav {
right: 0; right: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
margin: 25px 60px 0 0; margin: 15px 60px 0 0;
text-align: right; text-align: right;
} }
@ -30,36 +30,41 @@ nav li {
} }
nav li ul { nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
border: 1px solid #000; border: 1px solid #000;
right: 0;
overflow: hidden;
opacity: 0; opacity: 0;
overflow-y: auto; overflow: hidden;
transition: opacity .3s ease, max-height .5s ease; padding: 0;
position: absolute;
right: 0;
top: 26px;
transform-origin: 100% 0%;
transform: scale(1, 0);
transition: opacity .4s ease-out, transform .2s ease;
transition-delay: .3s;
} }
nav li:hover ul { nav li:hover ul {
opacity: 1; opacity: 1;
max-height: 100px; transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
} }
nav li ul li { nav li ul li {
display: block; display: block;
}
nav li ul a {
display: block;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 4px 10px; padding: 4px 10px;
white-space: nowrap; white-space: nowrap;
} }
nav li ul a {
display: block;
margin: 0;
padding: 0;
}
nav li ul a.active { nav li ul a.active {
border-bottom: 0; border-bottom: 0;
} }
@ -78,7 +83,7 @@ nav a {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 10; z-index: 1;
} }
.github-corner svg { .github-corner svg {
@ -117,6 +122,7 @@ body {
font-size: 15px; font-size: 15px;
letter-spacing: 0; letter-spacing: 0;
margin: 0; margin: 0;
overflow-x: hidden;
} }
/* main */ /* main */
@ -137,7 +143,7 @@ main {
z-index: 1; z-index: 1;
padding-top: 40px; padding-top: 40px;
left: 0; left: 0;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
.sidebar ul { .sidebar ul {
@ -197,11 +203,11 @@ main {
transition: left 250ms ease; transition: left 250ms ease;
} }
main.close .sidebar { body.close .sidebar {
left: -300px; left: -300px;
} }
main.close .content { body.close .content {
left: 0; left: 0;
} }
@ -216,21 +222,29 @@ main.close .content {
.sidebar { .sidebar {
left: -300px; left: -300px;
transition: left 250ms ease; transition: transform 250ms ease;
} }
.content { .content {
left: 0; left: 0;
min-width: 100vw; min-width: 100vw;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
main.close .sidebar { body.close .sidebar {
left: 0; transform: translateX(300px);
} }
main.close .content { body.close .content {
left: 300px; transform: translateX(300px);
}
nav, .github-corner {
transition: transform 250ms ease-out;
}
body.close nav,
body.close .github-corner {
transform: translateX(300px);
} }
} }

68
themes/vue.css
View file

@ -17,7 +17,7 @@ nav {
right: 0; right: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
margin: 25px 60px 0 0; margin: 15px 60px 0 0;
text-align: right; text-align: right;
} }
@ -29,39 +29,45 @@ nav ul, nav li {
/* navbar dropdown */ /* navbar dropdown */
nav li { nav li {
position: relative; position: relative;
display: inline-block;
} }
nav li ul { nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
border: 1px solid #42b983; border: 1px solid #42b983;
right: 0;
overflow: hidden;
opacity: 0; opacity: 0;
overflow-y: auto; overflow: hidden;
transition: opacity .3s ease, max-height .5s ease; padding: 0;
position: absolute;
right: 0;
top: 26px;
transform-origin: 100% 0%;
transform: scale(1, 0);
transition: opacity .4s ease-out, transform .2s ease;
transition-delay: .3s;
} }
nav li:hover ul { nav li:hover ul {
opacity: 1; opacity: 1;
max-height: 100px; transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
} }
nav li ul li { nav li ul li {
display: block; display: block;
}
nav li ul a {
display: block;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 4px 10px; padding: 4px 10px;
white-space: nowrap; white-space: nowrap;
} }
nav li ul a {
display: block;
padding: 0;
margin: 0;
}
nav li ul a.active { nav li ul a.active {
border-bottom: 0; border-bottom: 0;
} }
@ -89,7 +95,7 @@ nav a.active {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 10; z-index: 1;
} }
.github-corner svg { .github-corner svg {
@ -131,6 +137,7 @@ body {
font-size: 15px; font-size: 15px;
letter-spacing: 0; letter-spacing: 0;
margin: 0; margin: 0;
overflow-x: hidden;
} }
/* main */ /* main */
@ -153,7 +160,7 @@ main {
z-index: 1; z-index: 1;
padding-top: 40px; padding-top: 40px;
left: 0; left: 0;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
.sidebar ul { .sidebar ul {
@ -217,21 +224,20 @@ main {
/* main content */ /* main content */
.content { .content {
bottom: 0; bottom: 0;
left: 300px;
overflow-y: auto; overflow-y: auto;
left: 300px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
overflow-x: hidden; overflow-x: hidden;
padding-top: 20px; padding-top: 20px;
transition: left 250ms ease;
} }
main.close .sidebar { body.close .sidebar {
left: -300px; transform: translateX(-300px);
} }
main.close .content { body.close .content {
left: 0; left: 0;
} }
@ -246,21 +252,29 @@ main.close .content {
.sidebar { .sidebar {
left: -300px; left: -300px;
transition: left 250ms ease; transition: transform 250ms ease;
} }
.content { .content {
left: 0; left: 0;
min-width: 100vw; min-width: 100vw;
transition: left 250ms ease-out; transition: transform 250ms ease-out;
} }
main.close .sidebar { body.close .sidebar {
left: 0; transform: translateX(300px);
} }
main.close .content { body.close .content {
left: 300px; transform: translateX(300px);
}
nav, .github-corner {
transition: transform 250ms ease-out;
}
body.close nav,
body.close .github-corner {
transform: translateX(300px);
} }
} }