Nuxt 使用

如果你正在使用 Nuxt，这个包有一个特定的实现，可以使自定义指令的声明更加容易。

它与 @vueuse/motion 一起发布，并且可以通过 @vueuse/motion/nuxt 导入。

它应该可以与 nuxt3 和 @nuxt/bridge 一起工作。

安装

将 @vueuse/motion/nuxt 添加到 nuxt.config.js 的 modules 部分

{
  // nuxt.config.js
  modules: ['@vueuse/motion/nuxt']
}

然后，配置你的动画 🤹

{
  // nuxt.config.js
  runtimeConfig: {
    public: {
      motion: {
        directives: {
          'pop-bottom': {
            initial: {
              scale: 0,
              opacity: 0,
              y: 100,
            },
            visible: {
              scale: 1,
              opacity: 1,
              y: 0,
            }
          }
        }
      }
    }
  }
}

SSR 支持

@vueuse/motion 通过指令和 <Motion /> 组件支持 SSR。

动画的 SSR 支持主要包括从你的组件绑定中解析 initial 变体。

一旦解析，这个 initial 值会与你的组件 style 属性合并。

<template>
  <div
    v-motion="{
      initial: {
        y: 100,
        opacity: 0
      },
      enter: {
        y: 0,
        opacity: 1
      }
    }"
  >
    Hello
  </div>

  <!-- OR -->

  <div
    v-motion
    :initial="initial"
    :enter="enter"
  >
    Hello
  </div>
</template>

<script setup>
const initial = ref({
  y: 100,
  opacity: 0,
})

const enter = ref({
  y: 0,
  opacity: 1,
})
</script>

这个 div 将会在服务器端渲染为

<div style="opacity:0;transform:translate3d(0px,100px,0px);">Hello</div>

显然你可以想象到很多使用这种方式的实现，并且始终知道你的动画将会被正确地服务器端渲染。

目录