aos是和wow插件类似的动画插件,二者效果是差不多的，区别是aos.js能在页面回滚的时候，元素能回到之前的状态，这样可以实现循环动画效果

演示效果

演示效果

Vue AOS（Animate On Scroll）是一个用于在滚动时添加动画效果的Vue.js插件。它基于AOS库，并提供了与Vue.js无缝集成的功能。

下面是一个使用Vue AOS的简单示例：

安装Vue AOS插件：

npm install vue-aos --save

在Vue项目中导入和使用Vue AOS：

// main.js

import Vue from 'vue';
import AOS from 'vue-aos';
import 'aos/dist/aos.css';

Vue.use(AOS);

new Vue({
  el: '#app',
  // ...
});

在上述示例中，我们在main.js文件中导入了Vue AOS，并将其作为Vue插件进行注册。然后，我们将AOS组件全局注册到Vue实例中，以便在整个应用程序中使用。

在Vue组件中使用AOS：

<template>
  <div>
    <h1 data-aos="fade-up">Hello, AOS!</h1>
    <p data-aos="zoom-in">Welcome to Vue AOS.</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$AOS.init(); // 初始化AOS动画
    });
  }
}
</script>

<style scoped>
h1 {
  transition-duration: 1s; /* 设置动画过渡时间 */
}
</style>

在上述示例中，我们在<h1>和<p>标签中添加了data-aos属性，并指定了不同的动画效果（例如fade-up和zoom-in）。在Vue组件的mounted()生命周期钩子中，使用this.$AOS.init()方法来初始化AOS动画。

另外，你可以通过在<style>标签中添加过渡效果来进一步自定义动画样式。

这只是一个简单的示例，你可以根据需要在不同的元素上添加不同的AOS动画效果，还可以使用AOS提供的其他配置选项来进一步定制动画行为和样式。

需要注意的是，确保在使用之前正确引入和配置AOS的CSS文件，以确保样式正常加载。

希望这个示例能帮助你开始使用Vue AOS插件实现滚动时的动画效果。

常用的data-aos动画效果列表：

淡入动画效果：

• fade：淡入效果
• fade-up：向上淡入
• fade-down：向下淡入
• fade-left：向左淡入
• fade-right：向右淡入
• fade-up-right：向右上方淡入
• fade-up-left：向左上方淡入
• fade-down-right：向右下方淡入
• fade-down-left：向左下方淡入

滑动动画效果：

• slide-up：向上滑入
• slide-down：向下滑入
• slide-left：向左滑入
• slide-right：向右滑入

缩放动画效果：

• zoom-in：逐渐放大
• zoom-out：逐渐缩小

旋转动画效果：

• flip-up：向上翻转
• flip-down：向下翻转
• flip-left：向左翻转
• flip-right：向右翻转

其他效果：

• spin：旋转
• spin-up：向上旋转
• spin-down：向下旋转
• spin-left：向左旋转
• spin-right：向右旋转
• bounce：反弹效果
• rotate：旋转一定角度

这只是一小部分可用的动画效果示例，AOS提供了更多丰富的动画效果和配置选项，你可以根据自己的需求选择适合的动画效果。记得在使用之前确保已正确引入AOS的CSS和JavaScript文件，并在需要添加动画效果的元素上使用data-aos属性来指定动画效果。