Skip to content

Commit f8a39a9

Browse files
author
reco_luan
committed
reactor: refacor load tansition
 refacor load tansition by ModuleTransition.vue
1 parent 8994c5b commit f8a39a9

File tree

19 files changed

+292
-333
lines changed

19 files changed

+292
-333
lines changed

‎components/Common.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474
</template>
7575

7676
<script>
77-
import Navbar from '@theme/components/Navbar.vue'
78-
import Sidebar from '@theme/components/Sidebar.vue'
77+
import Navbar from '@theme/components/Navbar'
78+
import Sidebar from '@theme/components/Sidebar'
7979
import { resolveSidebarItems } from '@theme/helpers/utils'
8080
import Password from '@theme/components/Password'
8181
import { setTimeout } from 'timers'

‎components/DropdownLink.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
</template>
5454

5555
<script>
56-
import NavLink from '@theme/components/NavLink.vue'
57-
import DropdownTransition from '@theme/components/DropdownTransition.vue'
56+
import NavLink from '@theme/components/NavLink'
57+
import DropdownTransition from '@theme/components/DropdownTransition'
5858
5959
export default {
6060
components: { NavLink, DropdownTransition },

‎components/Home.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<template>
22
<div class="home">
33
<div class="hero">
4-
<ModuleTransition delay="0.08">
4+
<ModuleTransition>
55
<img
66
v-if="data.isShowHeroImage !== false && recoShowMoudle"
77
:style="heroImageStyle"
88
:src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
99
alt="hero">
1010
</ModuleTransition>
11-
<ModuleTransition delay="0.16">
11+
<ModuleTransition delay="0.08">
1212
<h1 v-if="data.isShowTitleInHome !== false && recoShowMoudle">{{ data.heroText || $title || '午后南杂' }}</h1>
1313
</ModuleTransition>
14-
<ModuleTransition delay="0.24">
14+
<ModuleTransition delay="0.16">
1515
<p v-if="recoShowMoudle" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
1616
</ModuleTransition>
17-
<ModuleTransition delay="0.32">
17+
<ModuleTransition delay="0.24">
1818
<p class="huawei" v-if="$themeConfig.huawei === true && recoShowMoudle">
1919
<i class="iconfont reco-huawei" style="color: #fc2d38"></i>
2020
&nbsp;&nbsp;&nbsp;华为，为中华而为之！
2121
</p>
2222
</ModuleTransition>
23-
<ModuleTransition delay="0.4">
23+
<ModuleTransition delay="0.32">
2424
<p class="action" v-if="data.actionText && data.actionLink && recoShowMoudle">
2525
<NavLink class="action-button" :item="actionLink"/>
2626
</p>
@@ -42,8 +42,8 @@
4242
</template>
4343

4444
<script>
45-
import NavLink from '@theme/components/NavLink.vue'
46-
import ModuleTransition from '@theme/components/ModuleTransition.vue'
45+
import NavLink from '@theme/components/NavLink'
46+
import ModuleTransition from '@theme/components/ModuleTransition'
4747
4848
export default {
4949
components: { NavLink, ModuleTransition },

‎components/HomeBlog.vue‎

Lines changed: 72 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,92 @@
11
<template>
2-
<div class="home-blog" :class="recoShow?'reco-show': 'reco-hide'">
3-
<div class="hero" :style="{background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
4-
<h1>{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
2+
<div class="home-blog">
3+
<div
4+
class="hero"
5+
:style="{
6+
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
7+
<ModuleTransition>
8+
<h1 v-if="recoShowMoudle">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
9+
</ModuleTransition>
510

6-
<p class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
7-
<p class="huawei" v-if="$themeConfig.huawei === true"><i class="iconfont reco-huawei" style="color: #fc2d38"></i>&nbsp;&nbsp;&nbsp;华为，为中华而为之！</p>
11+
<ModuleTransition delay="0.08">
12+
<p v-if="recoShowMoudle" class="description">
13+
{{ $description || 'Welcome to your vuePress-theme-reco site' }}
14+
</p>
15+
</ModuleTransition>
16+
17+
<ModuleTransition delay="0.16">
18+
<p
19+
class="huawei"
20+
v-if="recoShowMoudle && $themeConfig.huawei === true">
21+
<i class="iconfont reco-huawei" style="color: #fc2d38"></i>&nbsp;&nbsp;&nbsp;华为，为中华而为之！
22+
</p>
23+
</ModuleTransition>
824
</div>
925

10-
<div class="home-blog-wrapper">
11-
<div class="blog-list">
12-
<!-- 博客列表 -->
13-
<note-abstract
14-
:data="$recoPosts"
15-
:hideAccessNumber="true"
16-
:currentPage="currentPage"></note-abstract>
17-
<!-- 分页 -->
18-
<pagation
19-
class="pagation"
20-
:total="$recoPosts.length"
21-
:currentPage="currentPage"
22-
@getCurrentPage="getCurrentPage" />
23-
</div>
24-
<div class="info-wrapper">
25-
<img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
26-
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
27-
<div class="num">
28-
<div>
29-
<h3>{{$recoPosts.length}}</h3>
30-
<h6>文章</h6>
31-
</div>
32-
<div>
33-
<h3>{{$tags.list.length}}</h3>
34-
<h6>标签</h6>
26+
<ModuleTransition delay="0.24">
27+
<div v-if="recoShowMoudle" class="home-blog-wrapper">
28+
<div class="blog-list">
29+
<!-- 博客列表 -->
30+
<note-abstract
31+
:data="$recoPosts"
32+
:hideAccessNumber="true"
33+
:currentPage="currentPage"></note-abstract>
34+
<!-- 分页 -->
35+
<pagation
36+
class="pagation"
37+
:total="$recoPosts.length"
38+
:currentPage="currentPage"
39+
@getCurrentPage="getCurrentPage" />
40+
</div>
41+
<div class="info-wrapper">
42+
<img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
43+
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
44+
<div class="num">
45+
<div>
46+
<h3>{{$recoPosts.length}}</h3>
47+
<h6>文章</h6>
48+
</div>
49+
<div>
50+
<h3>{{$tags.list.length}}</h3>
51+
<h6>标签</h6>
52+
</div>
3553
</div>
54+
<hr>
55+
<h4><i class="iconfont reco-category"></i> 分类</h4>
56+
<ul class="category-wrapper">
57+
<li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
58+
<router-link :to="item.path">
59+
<span class="category-name">{{ item.name }}</span>
60+
<span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
61+
</router-link>
62+
</li>
63+
</ul>
64+
<hr>
65+
<h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> 标签</h4>
66+
<TagList @getCurrentTag="getPagesByTags" />
67+
<h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> 友链</h4>
68+
<FriendLink />
3669
</div>
37-
<hr>
38-
<h4><i class="iconfont reco-category"></i> 分类</h4>
39-
<ul class="category-wrapper">
40-
<li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
41-
<router-link :to="item.path">
42-
<span class="category-name">{{ item.name }}</span>
43-
<span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
44-
</router-link>
45-
</li>
46-
</ul>
47-
<hr>
48-
<h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> 标签</h4>
49-
<TagList @getCurrentTag="getPagesByTags" />
50-
<h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> 友链</h4>
51-
<FriendLink />
5270
</div>
53-
</div>
71+
</ModuleTransition>
5472

55-
<Content class="home-center" custom/>
73+
<ModuleTransition delay="0.36">
74+
<Content v-if="recoShowMoudle" class="home-center" custom/>
75+
</ModuleTransition>
5676
</div>
5777
</template>
5878

5979
<script>
60-
import TagList from '@theme/components/TagList.vue'
61-
import FriendLink from '@theme/components/FriendLink.vue'
62-
import NoteAbstract from '@theme/components/NoteAbstract.vue'
80+
import TagList from '@theme/components/TagList'
81+
import FriendLink from '@theme/components/FriendLink'
82+
import NoteAbstract from '@theme/components/NoteAbstract'
6383
import pagination from '@theme/mixins/pagination'
84+
import ModuleTransition from '@theme/components/ModuleTransition'
6485
import { getOneColor } from '@theme/helpers/other'
6586
6687
export default {
6788
mixins: [pagination],
68-
components: { NoteAbstract, TagList, FriendLink },
89+
components: { NoteAbstract, TagList, FriendLink, ModuleTransition },
6990
data () {
7091
return {
7192
recoShow: false,
@@ -263,60 +284,6 @@ export default {
263284
}
264285
}
265286
266-
.reco-hide {
267-
.hero {
268-
img {
269-
load-start()
270-
}
271-
h1 {
272-
load-start()
273-
color red
274-
}
275-
.description {
276-
load-start()
277-
}
278-
.huawei {
279-
load-start()
280-
}
281-
.action-button {
282-
load-start()
283-
}
284-
}
285-
.home-blog-wrapper {
286-
load-start()
287-
}
288-
.home-center {
289-
load-start()
290-
padding 0
291-
}
292-
}
293-
294-
.reco-show {
295-
.hero {
296-
img {
297-
load-end(0.08s)
298-
}
299-
h1 {
300-
load-end(0.16s)
301-
}
302-
.description {
303-
load-end(0.24s)
304-
}
305-
.huawei {
306-
load-end(0.32s)
307-
}
308-
.action-button {
309-
load-end(0.4s)
310-
}
311-
}
312-
.home-blog-wrapper {
313-
load-end(0.48s)
314-
}
315-
.home-center {
316-
load-end(0.56s)
317-
}
318-
}
319-
320287
@media (max-width: $MQMobile) {
321288
.home-blog {
322289
padding-left: 1.5rem;

components/Mode/ModeOptions.vue renamed to components/Mode/ModePicker.vue

File renamed without changes.

‎components/Mode/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
</a>
66
<transition name="menu-transition" mode="out-in">
77
<div v-show="showMenu" class="color-picker-menu">
8-
<ModeOptions />
8+
<ModePicker />
99
</div>
1010
</transition>
1111
</div>
1212
</template>
1313

1414
<script>
1515
import ClickOutside from 'vue-click-outside'
16-
import ModeOptions from './ModeOptions.vue'
16+
import ModePicker from './ModePicker'
1717
1818
export default {
1919
name: 'UserSettings',
@@ -23,7 +23,7 @@ export default {
2323
},
2424
2525
components: {
26-
ModeOptions
26+
ModePicker
2727
},
2828
2929
data () {

‎components/ModuleTransition.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,16 @@ export default {
1616
delay: {
1717
type: String,
1818
default: '0'
19+
},
20+
duration: {
21+
type: String,
22+
default: '.25'
1923
}
2024
},
2125
2226
methods: {
2327
setStyle (items) {
24-
items.style.transition = `all .25s ease-in ${this.delay}s`
28+
items.style.transition = `all ${this.duration}s ease-in-out ${this.delay}s`
2529
items.style.transform = 'translateY(-20px)'
2630
items.style.opacity = 0
2731
},

‎components/NavLinks.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
</template>
3232

3333
<script>
34-
import DropdownLink from '@theme/components/DropdownLink.vue'
34+
import DropdownLink from '@theme/components/DropdownLink'
3535
import { resolveNavLinkItem } from '@theme/helpers/utils'
36-
import NavLink from '@theme/components/NavLink.vue'
36+
import NavLink from '@theme/components/NavLink'
3737
3838
export default {
3939
components: { NavLink, DropdownLink },

‎components/Navbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<script>
3636
import AlgoliaSearchBox from '@AlgoliaSearchBox'
3737
import SearchBox from '@SearchBox'
38-
import SidebarButton from '@theme/components/SidebarButton.vue'
39-
import NavLinks from '@theme/components/NavLinks.vue'
38+
import SidebarButton from '@theme/components/SidebarButton'
39+
import NavLinks from '@theme/components/NavLinks'
4040
import Mode from '@theme/components/Mode'
4141
4242
export default {

0 commit comments

Comments
 (0)
⚡