点击事件上的AOS动画？

Posted 2023-05-09

【中文标题】点击事件上的AOS动画？

【英文标题】：AOS animation on click event?

【发布时间】：2019-01-06 13:51:20

【问题描述】：

我的页面正在使用 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'
  );
);

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

【参考方案1】：

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

【讨论】：

很好的解决方案。您将如何对隐藏且仅滚动到视图中的项目使用此方法？