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',
  // ...
});

在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>

常用的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：旋转一定角度