使用类添加aos.js时遇到问题 [英] Having trouble adding aos.js using classes

问题描述

我有一个Gutenberg网站，我想添加用户可以控制的动画，我使用的是aos（滚动动画），我想如果我创建一个类，然后在其上循环并添加相关的数据aos值，例如

I have a Gutenberg website and I want to add animations that the use can control, I am using aos (animate on scroll) and I figured, if I create a class then loop over it and that adds the relevant data-aos values e.g.

$('.aos-fade-up').each(function(i) {
    $(this).attr('data-aos', 'fade-up');
});

它按预期工作，添加了相关属性，并且内容被隐藏，但滚动没有任何反应

It works as intended, adds the relevant attribute, and the content is hidden, but nothing happens on scroll.

这是什么问题？该属性处于启用状态，它隐藏了内容，但滚动时没有任何反应。

What is the problem here? The attribute is on, it hides the content but nothing happens on scroll.

在此处书写： https://codepen.io/StuartAttain/pen/MWWzVpe

推荐答案

执行替换后，您必须初始化：

https://codepen.io/farinspace/pen/bGVppQb

或执行 AOS.refreshHard（）; 之后：

https://codepen.io/farinspace/pen/ExVKKrw

这篇关于使用类添加aos.js时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！