我的页面使用 AOS 插件制作动画。 AOS 将随着页面加载而加载:

AOS.init({
  once: true,
  easing: 'ease-in-out'
});

隐藏同一页面上的导航列表。它应该只在我们点击导航菜单图标(汉堡包图标)时显示。我还希望使用 AOS 插件对列表进行动画处理。

这是我用来在点击时初始化插件的代码:

var iconButton = $("button");
iconButton.on("click", function() {
  AOS.init({
    startEvent: 'click',
    easing: 'ease-in-out'
  });
});

但是,我认为这个插件会在页面加载时初始化。任何想法,我怎样才能使这项工作?

最佳答案

AOS.init({
    once: true,
    easing: 'ease-in-out'
});
var iconButton = $("button");
iconButton.on("click", function() {
    $(iconButton).removeClass('aos-animate');
    setTimeout(function() {
        $(iconButton).addClass('aos-animate');
    }, 400);
});

jsfiddle Test

关于jquery - 单击事件上的 AOS 动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51591818/

10-11 18:54