最近一直在学习 React 高阶知识，因此对于主页的开发再一次停滞了，主要也是一段时间内没有找到什么灵感，今天空闲时间打开又添加了一些另外的功能，其中包括了折腾了好久的主页加载 Spring （不是那个 Spring 啦）弹簧效果和模糊效果。

<!--more-->

最后的效果在 Grtsinry43 的个人主页

（最近还会考虑继续更新，哭）

环境准备

这里我的网站是使用 Nuxt.js 开发的，使用了"nuxt": "^3.12.4",于是就可以使用 Vue.js 的所有语法和写法，当然也包括自定义指令啦！这就为我们的集成添加了可行性

前置知识

首先我们要知道 Vue 中的指令是类似v-xxx的形式，比如我们平时常用的 v-model v-for 等等都是其提供的指令，当然也为我们保留了自定义的能力。

问题引入

在标准 Vue/Vue+Vite 项目中，其往往位于 /directives 路径，在我们自定义之后在 main.js/main.ts 文件中引入即可

js
1import { createApp } from 'vue';
2import App from './App.vue';
3import scrollSpring from '@/directives/scrollSpring';
4
5const app = createApp(App);
6
7app.directive('scroll-spring', scrollSpring);
8
9app.mount('#app');

而在 Nuxt.js项目中，其主 app 对象创建与挂载，以及 SSR 实现等都是由框架统一管理，为了引入里定自定义指令，我们要借助 nuxt 强大的插件系统。

问题解决

我们可以参考对应的文档： Vue指令

其给出了这样一段示例

js
1export default defineNuxtPlugin((nuxtApp) => {
2  nuxtApp.vueApp.directive('focus', {
3    mounted (el) {
4      el.focus()
5    },
6    getSSRProps (binding, vnode) {
7      // 你可以在这里提供SSR特定的props
8      return {}
9    }
10  })

由于我们无需单独处理 SSR 部分，直接引入插件注册指令即可，Nuxt 会自动扫描并加载 /plugins 路径的文件，无需手动添加。

实现这段动画的大致思路就是，首先所有元素默认 opacity 为 0，并且有向下的位移，当元素移动到视口内即添加标签设置为可见，并恢复位置，当然也可以配合 filter blur 等实现模糊渐显的效果，于是写好如下 css

css
1/* 初始状态，元素处于下方且不可见，并带有模糊效果 */
2.scroll-item {
3  opacity: 0;
4  filter: blur(10px); /* 元素模糊 25px */
5  transform: translateY(20px); /* 元素初始位移 20px */
6  transition: transform 0.5s ease-out, opacity 0.5s ease-out, filter 0.5s ease-out; /* 为 filter 添加动画 */
7}
8
9/* 当元素进入视口时，透明度变为 1，模糊度变为 0，且上移回原位 */
10.scroll-in {

有了思路之后就写好对应的指令 js
/plugins/scrollSpring.js

js
1// 导出一个 Nuxt 插件
2export default defineNuxtPlugin((nuxtApp) => {
3    // 定义一个自定义指令 'scroll-spring'
4    nuxtApp.vueApp.directive('scroll-spring', {
5        // 当元素被挂载到 DOM 中时调用的钩子
6        mounted(el) {
7            // 设置 Intersection Observer 的选项
8            const options = {
9                root: null, // 使用浏览器视口作为根元素
10                rootMargin: '0px', // 根元素的边距

这里我们利用 Intersection Observer ，当元素进入视口触发回调添加类名，移出视口则去掉类名

接下来我们只要在对应的元素引入就可以啦！
注意 scroll-item 和 v-scroll-spring 缺一不可，前者负责决定开始状态，后者是动画和结束效果

这里简单贴一个代码片段，也可以参考我主页对应的仓库~
/pages/index.vue

vue
1<div class="slogan font-jb-mono scroll-item" v-scroll-spring>
2          <p>Coding,</p>
3          <p>build a better world</p>
4          <p>together!</p>
5        </div>
6        <span class="slogan-cn scroll-item" v-if="locale === 'zh'" v-scroll-spring>{{ t('slogan.cn') }}</span>
7        <br/>
8        <div class="button-container scroll-item" v-scroll-spring>
9          <UButton to="https://github.com/grtsinry43" target="_blank"
10                   icon="i-grommet-icons:github" style="vertical-align: -4px"

最后效果