使用Barba.js的transitionComplete hook,然后在相应的函数里等待GSAP元素存在后再执行动画。示例代码如下:
// 在transitionComplete中添加钩子
barba.hooks.after(() => {
// 等待GSAP元素存在
waitForElement('#gsap-element').then(() => {
// 执行动画
gsap.to('#gsap-element', { duration: 1, opacity: 1, y: 0 });
});
});
// waitForElement函数定义
function waitForElement(selector) {
/* 返回一个Promise,当selector元素存在时resolve,否则等待并轮询 */
return new Promise(resolve => {
const interval = setInterval(() => {
const element = document.querySelector(selector);
if (element) {
clearInterval(interval);
resolve();
}
}, 100);
});
}