archive-gh-me/docsify
1
0
Fork 0
mirror of https://github.com/docsifyjs/docsify.git synced 2025-12-08 19:55:52 +00:00
Code Issues Projects Releases Wiki Activity

Fix sidebar animation (#14)

Browse Source
This commit is contained in:
cinwell.li 2016-11-29 23:09:59 +08:00 committed by GitHub
parent a74cf6ceaf
commit 19bf043cf8
6 changed files with 132 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
404.dev.html
View File

@ -8,5 +8,5 @@
<body>
<div id="app"></div>
</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>

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
### Features
- Navbar support dropdown list, #6

9
src/event.js
View File

@ -77,7 +77,12 @@ export function activeLink (dom, activeParent) {
export function bindToggle (dom) {
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
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;
left: 0;
z-index: 10;
margin: 25px 60px 0 0;
margin: 15px 60px 0 0;
text-align: right;
}
@ -32,36 +32,41 @@ nav li {
}
nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6);
border: 1px solid #0074D9;
right: 0;
overflow: hidden;
opacity: 0;
overflow-y: auto;
transition: opacity .3s ease, max-height .5s ease;
overflow: hidden;
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 {
opacity: 1;
max-height: 100px;
transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
}
nav li ul li {
display: block;
}
nav li ul a {
display: block;
font-size: 14px;
margin: 0;
padding: 4px 10px;
white-space: nowrap;
}
nav li ul a {
display: block;
padding: 0;
margin: 0;
}
nav li ul a.active {
border-bottom: 0;
}
@ -89,7 +94,7 @@ nav a.active {
position: absolute;
top: 0;
right: 0;
z-index: 10;
z-index: 1;
}
.github-corner svg {
@ -132,6 +137,7 @@ body {
font-size: 15px;
letter-spacing: 0;
margin: 0;
overflow-x: hidden;
}
/* main */
@ -154,7 +160,7 @@ main {
z-index: 1;
padding-top: 40px;
left: 0;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
.sidebar ul {
@ -221,14 +227,13 @@ main {
top: 0;
overflow-x: hidden;
padding-top: 20px;
transition: left 250ms ease;
}
main.close .sidebar {
left: -16em;
body.close .sidebar {
transform: translateX(-16em);
}
main.close .content {
body.close .content {
left: 0;
}
@ -243,21 +248,29 @@ main.close .content {
.sidebar {
left: -16em;
transition: left 250ms ease;
transition: transform 250ms ease;
}
.content {
left: 0;
min-width: 100vw;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
main.close .sidebar {
left: 0;
body.close .sidebar {
transform: translateX(16em);
}
main.close .content {
left: 16em;
body.close .content {
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;
left: 0;
z-index: 10;
margin: 25px 60px 0 0;
margin: 15px 60px 0 0;
text-align: right;
}
@ -30,36 +30,41 @@ nav li {
}
nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6);
border: 1px solid #000;
right: 0;
overflow: hidden;
opacity: 0;
overflow-y: auto;
transition: opacity .3s ease, max-height .5s ease;
overflow: hidden;
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 {
opacity: 1;
max-height: 100px;
transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
}
nav li ul li {
display: block;
}
nav li ul a {
display: block;
font-size: 14px;
margin: 0;
padding: 4px 10px;
white-space: nowrap;
}
nav li ul a {
display: block;
margin: 0;
padding: 0;
}
nav li ul a.active {
border-bottom: 0;
}
@ -78,7 +83,7 @@ nav a {
position: absolute;
top: 0;
right: 0;
z-index: 10;
z-index: 1;
}
.github-corner svg {
@ -117,6 +122,7 @@ body {
font-size: 15px;
letter-spacing: 0;
margin: 0;
overflow-x: hidden;
}
/* main */
@ -137,7 +143,7 @@ main {
z-index: 1;
padding-top: 40px;
left: 0;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
.sidebar ul {
@ -197,11 +203,11 @@ main {
transition: left 250ms ease;
}
main.close .sidebar {
body.close .sidebar {
left: -300px;
}
main.close .content {
body.close .content {
left: 0;
}
@ -216,21 +222,29 @@ main.close .content {
.sidebar {
left: -300px;
transition: left 250ms ease;
transition: transform 250ms ease;
}
.content {
left: 0;
min-width: 100vw;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
main.close .sidebar {
left: 0;
body.close .sidebar {
transform: translateX(300px);
}
main.close .content {
left: 300px;
body.close .content {
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;
left: 0;
z-index: 10;
margin: 25px 60px 0 0;
margin: 15px 60px 0 0;
text-align: right;
}
@ -29,39 +29,45 @@ nav ul, nav li {
/* navbar dropdown */
nav li {
position: relative;
display: inline-block;
}
nav li ul {
padding: 0;
max-height: 0;
position: absolute;
top: 24px;
background-color: rgba(255, 255, 255, .6);
border: 1px solid #42b983;
right: 0;
overflow: hidden;
opacity: 0;
overflow-y: auto;
transition: opacity .3s ease, max-height .5s ease;
overflow: hidden;
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 {
opacity: 1;
max-height: 100px;
transform: scale(1, 1);
transition: opacity .4s ease, transform .2s ease-out;
transition-delay: 0;
}
nav li ul li {
display: block;
}
nav li ul a {
display: block;
font-size: 14px;
margin: 0;
padding: 4px 10px;
white-space: nowrap;
}
nav li ul a {
display: block;
padding: 0;
margin: 0;
}
nav li ul a.active {
border-bottom: 0;
}
@ -89,7 +95,7 @@ nav a.active {
position: absolute;
top: 0;
right: 0;
z-index: 10;
z-index: 1;
}
.github-corner svg {
@ -131,6 +137,7 @@ body {
font-size: 15px;
letter-spacing: 0;
margin: 0;
overflow-x: hidden;
}
/* main */
@ -153,7 +160,7 @@ main {
z-index: 1;
padding-top: 40px;
left: 0;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
.sidebar ul {
@ -217,21 +224,20 @@ main {
/* main content */
.content {
bottom: 0;
left: 300px;
overflow-y: auto;
left: 300px;
position: absolute;
right: 0;
top: 0;
overflow-x: hidden;
padding-top: 20px;
transition: left 250ms ease;
}
main.close .sidebar {
left: -300px;
body.close .sidebar {
transform: translateX(-300px);
}
main.close .content {
body.close .content {
left: 0;
}
@ -246,21 +252,29 @@ main.close .content {
.sidebar {
left: -300px;
transition: left 250ms ease;
transition: transform 250ms ease;
}
.content {
left: 0;
min-width: 100vw;
transition: left 250ms ease-out;
transition: transform 250ms ease-out;
}
main.close .sidebar {
left: 0;
body.close .sidebar {
transform: translateX(300px);
}
main.close .content {
left: 300px;
body.close .content {
transform: translateX(300px);
}
nav, .github-corner {
transition: transform 250ms ease-out;
}
body.close nav,
body.close .github-corner {
transform: translateX(300px);
}
}