在 Vue 中使用 AOS 库答案

【问题标题】：Using AOS library with Vue在 Vue 中使用 AOS 库
【发布时间】：2018-11-14 17:58:45
【问题描述】：

我在 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" />

【问题讨论】：

你试过v-on:aos:in="myFunction"吗？
您确定事件冒泡还是可以到达您想要的 div？，也许它只能在文档级别上听，不会传播到特定元素
AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS: - 正如作者所说，是的，它适用于 @click 事件，唯一的问题是 aos:in。

标签： javascript vue.js animate-on-scroll

【解决方案1】：

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

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

【讨论】：