修复动画导致的fix元素定位失效

This commit is contained in:
结发受长生 2019-05-22 23:04:37 +08:00
parent a850a6ff07
commit 816c5dcd40
9 changed files with 22 additions and 16 deletions

View File

@ -19,7 +19,7 @@
<i class="icon icon-file-text-o"></i>
总字数
<span><%= wordcount(post.content) %></span>
</div> |
</div>
<div class="count-item">
<i class="icon icon-clock"></i>
预计阅读时间

View File

@ -10,7 +10,7 @@
</div>
</div>
<% } %>
<% if (!index && ((theme.toc === 1 && post.toc) || theme.toc === 2)){ %>
<% if (is_post() && ((theme.toc === 1 && post.toc) || theme.toc === 2)){ %>
<div class="toc-container tooltip-left">
<i class="icon icon-list"></i>
<div class="tooltip tooltip-east">

View File

@ -1,8 +1,5 @@
<nav id="mobile-nav">
<div class="overlay js-overlay" ></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" @click="openSlider($event, 'innerArchive')"><i class="icon icon-list"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
@ -29,7 +26,7 @@
<% var divide = 100 / count + '%' %>
<% for (let menuName in theme.menu){ %>
<li style="width: <%= divide %>"><a href="<%- url_for(theme.menu[menuName].url) %>"><%= __(theme.menu[menuName].name) %></a></li>
<%}%>
<% } %>
</ul>
</nav>
</header>

View File

@ -6,6 +6,9 @@
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
<%- partial('_partial/live2d') %>
</div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" @click="openSlider($event, 'innerArchive', true)"><i class="icon icon-list"></i></div>
</div>
<div class="mid-col" :class="{show: isShow,hide: isShow!==undefined && !isShow}">
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<div id="wrapper" class="body-wrap" v-pre>

View File

@ -46,6 +46,7 @@
font-size: 14px;
.count-item {
display: inline-block;
padding-right: 10px;
span {
font-weight: bold;
}

View File

@ -14,7 +14,7 @@ html, body, #container {
overflow-x: hidden;
overflow-y: auto;
}
#mobile-nav {
#mobile-nav,.js-mobile-btnctn {
display: none;
}
#container{

View File

@ -1,6 +1,3 @@
#mobile-nav {
display: block;
}
.body-wrap {
margin-bottom: 0;
}
@ -75,9 +72,6 @@
&.list {
background-color: rgba(100,100,100,0.7)
}
&:hover{
background: #444;
}
.icon{
font-size: 24px;
color: #fff;
@ -275,6 +269,7 @@
}
#mobile-nav{
display: block;
.header-author{
margin: 0;
position: relative;
@ -297,7 +292,9 @@
}
}
}
.js-mobile-btnctn {
display: block;
}
.header-menu{
height: auto;
margin: 10px 0 20px;

View File

@ -14,7 +14,11 @@ function init() {
Array.prototype.forEach.call($a, function($em){
$em.style.display = 'none'
})
}
}
// 避免由于动画带来的fix元素定位失效, 移到动画元素外层
var sideOpt = document.querySelector('.wrap-side-operation')
document.getElementById('container').appendChild(sideOpt)
}
export default { init }

View File

@ -38,7 +38,11 @@ new Vue({
stop (event) {
event.stopPropagation()
},
openSlider (event, type) {
openSlider (event, type, isMobile) {
if(isMobile && this.isShow) {
this.hideSlider()
return
}
event.stopPropagation()
this.innerArchive = false
this.friends = false