修复动画导致的fix元素定位失效
This commit is contained in:
parent
a850a6ff07
commit
816c5dcd40
@ -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>
|
||||
预计阅读时间
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
font-size: 14px;
|
||||
.count-item {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ html, body, #container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#mobile-nav {
|
||||
#mobile-nav,.js-mobile-btnctn {
|
||||
display: none;
|
||||
}
|
||||
#container{
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 }
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user