添加 AOS

AOS 是一个 JavaScript 动画库，当您向下（或向上）滚动页面时，它可以精美地动画您的 DOM 元素使其进入视图。它是一个小型库，非常易于使用，可以在您滚动页面时触发动画，而无需自己编写代码。要动画一个元素，只需使用 data-aos 属性：

<div data-aos="fade-in">...</div>

就像这样简单，当您滚动页面时，该元素将逐渐淡入。您甚至可以设置动画完成的秒数。那么，让我们来看看如何通过以下步骤将此库添加到您的 Nuxt 项目中：

在您的终端通过 npm 安装 AOS：
```
$ npm i aos
```

如下所示将以下元素添加到 index.vue 中：

// pages/index.vue
<template>
  <div class="grid-x">
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-01.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-02.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-03.jpg">
    </div>
  </div>
</template>

在此模板中，我们使用 Foundation 来为元素添加网格结构，并通过使用 data-aos 属性将 AOS 的 fade-up 动画应用于每个元素。

在 <script> 块中导入 AOS 的 JavaScript 和 CSS 资源，并在 Vue 组件挂载时初始化 AOS：
```
// pages/index.vue
<script>
import 'aos/dist/aos.css'
import aos from 'aos'
export default {
  mounted () {
    aos.init()
  }
}
</script>
```
当您刷新屏幕时，您应该会看到当您向下滚动页面时，这些元素会一个接一个地向上淡入。它可以让您毫不费力地精美地展示您的内容，这不是很棒吗？

在您的终端通过 npm 安装 AOS：
```
$ npm i aos
```

如下所示将以下元素添加到 index.vue 中：

// pages/index.vue
<template>
  <div class="grid-x">
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-01.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-02.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-03.jpg">
    </div>
  </div>
</template>

在此模板中，我们使用 Foundation 来为元素添加网格结构，并通过使用 data-aos 属性将 AOS 的 fade-up 动画应用于每个元素。

在 <script> 块中导入 AOS 的 JavaScript 和 CSS 资源，并在 Vue 组件挂载时初始化 AOS：
// pages/index.vue <script> import 'aos/dist/aos.css' import aos from 'aos' export default { mounted () { aos.init() } } </script>
当您刷新屏幕时，您应该会看到当您向下滚动页面时，这些元素会一个接一个地向上淡入。它可以让您毫不费力地精美地展示您的内容，这不是很棒吗？

好的，我们来将这段关于在 Nuxt.js 中全局注册和初始化 AOS (Animate On Scroll) 动画库的步骤原样翻译为中文：

然而，如果我们有多个页面需要添加动画，刚才应用 AOS 的方式就不是一个好的做法了。你不得不将之前的脚本复制到每一个需要 AOS 动画的页面中。因此，如果你有多个页面想要使用 AOS 动画，那么你应该全局地注册和初始化它。让我们通过以下步骤来了解如何实现：

在 /plugins/ 目录下创建一个 aos.client.js 插件，导入 AOS 资源并按如下方式初始化 AOS：
// plugins/client-only/aos.client.js import 'aos/dist/aos.css' import aos from 'aos' aos.init({ duration: 2000, })
在这个插件中，我们指示 AOS 将动画元素的时长设置为 2 秒 – 这是全局设置。你可以在 https://github.com/michalsnik/aos#1-initialize-aos 找到其余的设置选项。
在 Nuxt 配置文件 nuxt.config.js 的 plugins 选项中注册上述 AOS 插件，如下所示：
```
// nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/client-only/aos.client.js',
  ],
}
```
就是这样。现在你可以在多个页面上应用 AOS 动画，而无需复制脚本。

请注意，我们直接在 AOS 插件中导入了 CSS 资源，而不是像之前章节中对 Foundation 和 Motion UI 所做的那样，通过 Nuxt 配置文件的 css 选项全局导入。因此，如果你想对 Foundation 也这样做，你可以直接将其 CSS 资源导入到插件文件中，如下所示：

// plugins/client-only/foundation-site.client.js
import 'foundation-sites/dist/css/foundation.min.css'
import 'foundation-sites'

然后，你就不必在 Nuxt 配置文件中使用全局的 css 选项了。如果你想保持你的配置文件 “简洁”，并将 UI 框架的 CSS 和 JavaScript 资源放在它们的插件文件中，这种方式是首选的。

你可以在我们 GitHub 仓库的 /chapter-3/nuxt-universal/adding-aos/ 中找到这个示例 Nuxt 应用的源代码。

如果你想了解更多关于 AOS 及其余动画名称的信息，请访问 https://michalsnik.github.io/aos/。

现在让我们探索最后一个可以帮助加速你的前端开发的 JavaScript 辅助工具 – Swiper。