javascript - 获取触发AOS自定义事件的元素

Question

我有几个元素在使用最新的 Animate On Scroll 库 ( https://github.com/michalsnik/aos )查看（进入视口）时触发自定义事件。

https://codepen.io/anon/pen/vMGQEb

HTML：

<div class="foo" data-aos data-aos-id="inview">
  Foo 1
</div>
<div class="foo" data-aos data-aos-id="inview">
  Foo 2
</div>

JS：

// Init AOS
AOS.init();

// Toggle red color    
document.addEventListener('aos:in:inview', function(e) {
   e.detail.classList.add('text-red');
});

CSS：

.text-red {
  color: red !important;
}

foo这个简单的脚本应该在元素进入视口时将元素涂成红色。除了 Edge 和 IE，它在任何地方都可以正常工作。据我所知，e.detail它不会返回 DOM 元素，但我不知道如何处理某些对象。

有任何想法吗？