使用AOS.js在幻灯片上滑动时不动Swiper.js
使用AOS.js在幻灯片上滑动时不动Swiper.js
提问于 2022-07-28 20:38:16
我使用Swiper.js在各部分之间滑动，也使用AOS.js在滚动体上进行动画。我想动画的文字在滑动部分，但只有文本在第一节动画，它只做了一次，当页面加载，而不是每次滑动滑动。我尝试了许多解决方案，但都没有奏效。以下是我在JS中尝试过的：
在幻灯片更改时使用AOS.refresh()
- on ()
- 重新调用AOS.init()
- ，在幻灯片更改时删除和添加AOS类，在幻灯片更改时手动删除和添加AOS类，将AOS属性手动添加到HTML
中
以下是两个可编辑以正确工作的片段。
var swiper = new Swiper('.swiper', {
on: {
init: function() {
$('.swiper-slide .wrapper').removeClass('aos-init').removeClass('aos-animate');
},
slideChange: function() {
$('.swiper-slide-active .wrapper').addClass('aos-init').addClass('aos-animate');
AOS.init();
AOS.refresh();
}
}
});
var swiper = new Swiper('.swiper', {
on: {
slideChangeTransitionStart: function() {
$('.swiper-slide .wrapper').hide(0);
$('.swiper-slide .wrapper').removeClass('aos-init').removeClass('aos-animate');
},
slideChangeTransitionEnd: function() {
$('.swiper-slide .wrapper').show(0);
AOS.init();
},
}
});
回答 1
Stack Overflow用户
发布于 2022-07-29 13:17:03
我认为你会遇到的问题是两者不兼容，滑动器实际上并不使用页面滚动来滚动内容，AOS使用交集观察者来检测页面滚动，如果一个元素在视图框边界内，您看到的初始动画只是内容加载init()事件，即使您能够破坏它不支持的组件(https://github.com/michalsnik/aos/issues/360)，它也将应用于所有ata-aos元素，因此您将看到它在视图中的所有视图中的动画，而不仅仅是在范围内的一个。您可能需要考虑更改您的方法，并希望创建一个具有实际滚动的滑块，交集观察者可以检测到这个滚动，以确定元素在范围内，或者在滑动器上创建一个函数来自己动画幻灯片的内容。我希望这能帮到你
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73158907
复制相关文章
相似问题
腾讯云开发者
