Question

我正在使用GSAP TimelineLite作为滑块。我注意到当从一个标签更改为另一个标签时，滑块会有点混乱。

我使用Page Visibility API解决了这个问题。如果页面未激活，则暂停时间线，一旦页面再次处于活动状态，时间线将恢复。

// page visibility    
document.addEventListener('visibilitychange', handleVisibilityChange);

function handleVisibilityChange() {
    if (document.hidden) {
        tl.pause();
    }
    else {
        tl.resume();
    }
}

这样可以正常工作，但是如果更改滑块之间的选项卡，时间轴可能仍会“中断”。我想知道是否有类似于jQuery的finish函数，而不是使用pause。

我尝试使用addPause功能，默认情况下会暂停时间轴末尾的时间轴。到目前为止似乎无法使它发挥作用。

function handleVisibilityChange() {
    if (document.hidden) {
        tl.addPause();
    }
    else {
        tl.resume();
    }
}

我还尝试在构造函数中使用onComplete函数，在时间轴中使用最后一个元素，而不是在页面不活动时暂停时间轴。但是，在切换到另一个选项卡后似乎没有任何内容被触发，没有显示任何控制台日志。

构造

tl = new TimelineLite({
    onComplete: function() {
        if (document.hidden) {
            console.log('timeline: pause');
            tl.pause();
        }
    }
});

时间线结束：

tl
    .to(activeSliderText, 0.5, { opacity: 0 })
    .fromTo(activeSlider, 1, { x: 0 }, { x: animateTo, ease: Power1.easeInOut }, '-=0.25')
    .fromTo(newSlider, 0.9, { x: animateFrom }, { x: 0, ease: Power1.easeInOut }, '-=1')
    .fromTo(newSliderText, 0.5, { opacity: 0 }, { opacity: 1, onComplete: endOfTimeline }, '-=0.25');

var endOfTimeline = function() {
    console.log('end of timeline');
    if (document.hidden) {
        console.log('timeline: pause');
        tl.pause();
    }
}

GSAP TimelineLite完成时间线而不是暂停

0 个答案: