在 Vue 中使用 AOS 库

Question

我在 vue 中使用 AOS（滚动动画）库。 AOS提供自定义JS事件：document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); });

我想在此事件发生时触发一个函数。我如何将它应用到我的 vue 组件中？它看起来像：v-on-aos:in 使用 v-on / @，但它不起作用。

这是我试过的： <div v-on:aos:in="myFunction" />

Answer 1

在创建的方法上添加您的文档事件侦听器，然后传递您的 vue 组件方法。

  created() {
    document.addEventListener('aos:in', this.aosEvent)
  },
   methods: {
    aosEvent(d){
      // event data
      console.log(d);
    }
  }

在 Vue 中使用 AOS 库

Using AOS library with Vue

javascript

vue.js

animate-on-scroll