Skip to content

Commit a6cd64a

Browse files
zyao89zyao89
committed
feat: add animation
1 parent ccbd5bf commit a6cd64a

File tree

16 files changed

+145
-14
lines changed

16 files changed

+145
-14
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"moment": "^2.24.0",
7373
"remove-markdown": "^0.3.0",
7474
"rss": "^1.2.2",
75+
"scrollreveal": "^4.0.6",
7576
"svg-sprite-loader": "^4.2.5",
7677
"svgo": "^1.3.2",
7778
"svgo-loader": "^2.2.1",

‎theme/components/AboutMe.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ export default {
2828
default() { return []; },
2929
},
3030
},
31-
31+
mounted() {
32+
this.$scroll.reveal(`.${this.$style.root}`, { delay: 100, origin: 'top', distance: '100px', interval: 100 });
33+
},
3234
};
3335
</script>
3436

‎theme/components/BlogPosts.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
v-for="(post, index) in currentPosts"
1313
:key="`${post.key}_${index}`"
1414
:post="post"
15+
:class="$style.postItem"
1516
></PostInfo>
1617
</TransitionFadeSlide>
1718
</template>
@@ -104,6 +105,10 @@ export default {
104105
.posts {
105106
position: relative;
106107
108+
.postItem {
109+
position: relative;
110+
}
111+
107112
.pagation {
108113
position: relative;
109114
text-align: center;

‎theme/components/Categories.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ export default {
5656
return { backgroundColor: getOneColor(index) };
5757
},
5858
},
59+
mounted() {
60+
this.$scroll.reveal(`.${this.$style.item}`, { interval: 100 });
61+
},
5962
};
6063
</script>
6164

‎theme/components/Footer.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<footer :class="$style.footer">
3-
<span v-if="footer.powerby">
3+
<span v-if="footer.powerby" :class="$style.item">
44
<SvgIcon :class="$style.icon" name="zap"></SvgIcon>
55
<NavLink :item="POWERBY_LINK" hideOutboundIcon>{{ POWERBY_NAME }}</NavLink>
66
</span>
7-
<span v-if="beian">
7+
<span v-if="beian" :class="$style.item">
88
<SvgIcon :class="$style.icon" name="beian"></SvgIcon>
99
<NavLink :item="beian" hideOutboundIcon></NavLink>
1010
</span>
11-
<span v-if="copyright">
11+
<span v-if="copyright" :class="$style.item">
1212
<SvgIcon :class="$style.icon" name="copyright"></SvgIcon>
1313
<a>{{ copyright }}</a>
1414
</span>
@@ -54,6 +54,9 @@ export default {
5454
return false;
5555
},
5656
},
57+
mounted() {
58+
this.$scroll.reveal(`.${this.$style.item}`, { delay: 300, interval: 100 });
59+
},
5760
};
5861
</script>
5962

@@ -78,6 +81,10 @@ export default {
7881
}
7982
}
8083
84+
.item {
85+
position: relative;
86+
}
87+
8188
@media (max-width: $MQMobile) {
8289
.footer {
8390
text-align: left !important;

‎theme/components/Header.vue‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div>
2121
<h1
2222
v-if="frontmatter.heroText !== null"
23-
:class="[ heroImage ? '' : $style.notImg ]"
23+
:class="[ $style.title, heroImage ? '' : $style.notImg ]"
2424
:has-banner="!!frontmatter.banner"
2525
id="main-title"
2626
>
@@ -35,7 +35,11 @@
3535
v-if="frontmatter.badges && Array.isArray(frontmatter.badges)"
3636
:class="$style.badges"
3737
>
38-
<span v-for="(item, index) in frontmatter.badges" :key="index">
38+
<span
39+
v-for="(item, index) in frontmatter.badges"
40+
:key="index"
41+
:class="$style.badgesItem"
42+
>
3943
<iframe
4044
v-if="!/^https?/.test(item)"
4145
:src="`https://ghbtns.com/github-btn.html?${item}`"
@@ -130,6 +134,11 @@ export default {
130134
return style;
131135
},
132136
},
137+
mounted() {
138+
this.$scroll.reveal(`.${this.$style.title}`, { origin: 'top', distance: '100px' });
139+
this.$scroll.reveal(`.${this.$style.description}`, { origin: 'bottom', distance: '100px' });
140+
this.$scroll.reveal(`.${this.$style.badgesItem}`, { delay: 300, interval: 200 });
141+
},
133142
};
134143
</script>
135144

@@ -145,6 +154,10 @@ export default {
145154
width: 90%;
146155
margin: 0 auto;
147156
157+
.title {
158+
position: relative;
159+
}
160+
148161
&.hasHeroImage {
149162
text-align: left;
150163
justify-content: space-between;
@@ -212,6 +225,10 @@ export default {
212225
margin: auto;
213226
}
214227
228+
.badgesItem {
229+
position: relative;
230+
}
231+
215232
.description {
216233
max-width: 36rem;
217234
font-size: 1.2rem;

‎theme/components/HeaderBoxInfo.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export default {
3333
}, $current);
3434
},
3535
},
36+
mounted() {
37+
this.$scroll.reveal(`.${this.$style.title}`, { origin: 'left', distance: '100px', interval: 100 });
38+
this.$scroll.reveal(`.${this.$style.meta}`, { origin: 'right', distance: '100px', interval: 100 });
39+
},
3640
};
3741
</script>
3842
<style lang="stylus" module>

‎theme/components/Home.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<template v-else>
1717
<div v-if="features && features.length" :class="$style.features">
1818
<section v-for="(feature, index) in features" :key="index" :class="$style.feature">
19-
<div :class="[ $style.wrapper, index % 2 === 1 ? $style.even : '' ]">
19+
<div :class="[ $style.wrapper, index % 2 === 1 ? $style.even : $style.odd ]">
2020
<div v-if="feature.image" :class="$style.wrapperImg">
2121
<img :src="$withBase(feature.image)" alt />
2222
</div>
@@ -52,6 +52,13 @@ export default {
5252
return !this.features.some(item => !!item.image);
5353
},
5454
},
55+
mounted() {
56+
this.$scroll.reveal(`.${this.$style.features}`);
57+
this.$scroll.reveal(`.${this.$style.odd}>.${this.$style.wrapperImg}`, { delay: 300, origin: 'left', distance: '100px', interval: 200 });
58+
this.$scroll.reveal(`.${this.$style.even}>.${this.$style.wrapperImg}`, { delay: 300, origin: 'right', distance: '100px', interval: 200 });
59+
this.$scroll.reveal(`.${this.$style.odd}>.${this.$style.wrapperText}`, { delay: 600, origin: 'right', distance: '100px', interval: 200 });
60+
this.$scroll.reveal(`.${this.$style.even}>.${this.$style.wrapperText}`, { delay: 600, origin: 'left', distance: '100px', interval: 200 });
61+
},
5562
};
5663
</script>
5764

@@ -110,8 +117,13 @@ export default {
110117
min-height: 25rem;
111118
112119
&.even {
120+
position: relative;
113121
flex-direction: row-reverse;
114122
}
123+
124+
&.odd {
125+
position: relative;
126+
}
115127
}
116128
117129
.wrapperImg {

‎theme/components/PostCardBlocks.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ export default {
6363
return [].concat(this.posts || this.$posts).slice(0, this.max);
6464
},
6565
},
66+
mounted() {
67+
this.$scroll.reveal(`.${this.$style.container}`);
68+
this.$scroll.reveal(`.${this.$style.cardItem}`, { delay: 100, origin: 'top', distance: '100px', interval: 100 });
69+
},
6670
};
6771
</script>
6872

‎theme/components/SidebarLink.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,18 @@ export default {
99
<style lang="stylus">
1010
a.sidebar-link {
1111
border-left: none;
12-
border-right: 0.25rem solid transparent;
12+
border-right: 0rem solid transparent;
13+
transition: all 0.3s;
14+
border-top-left-radius: $borderRadius;
15+
border-bottom-left-radius: $borderRadius;
16+
17+
&:hover {
18+
background: lighten($accentColor, 90%);
19+
}
1320
1421
&.active {
1522
border-right-color: $accentColor;
23+
border-right-width: 0.25rem;
1624
}
1725
1826
.sidebar-sub-headers & {

0 commit comments

Comments
 (0)