点击事件上的AOS动画?

时间:2018-07-30 10:21:29

标签: jquery css plugins jquery-plugins css-transitions

我的页面正在使用AOS动画插件。 AOS将随页面加载一起加载:

tooltip: {
  dateTimeLabelFormats: {
    millisecond: "%A, %b %e, %H:%M:%S"
  }
}

同一页面上的导航列表被隐藏。仅当我们单击导航菜单图标(汉堡图标)时,它才会显示。我还希望使用AOS插件对列表进行动画处理。

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

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

但是,我认为此插件将在页面加载时初始化。知道了,我该怎么做?

1 个答案:

答案 0 :(得分:4)

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