Question

动画在播放时起作用，但在我使用reverse（）函数时不起作用

这是演示https://codesandbox.io/s/gatsby-express-9uqi7导航栏组件

const [state, setState] = useState(false);
    const menuManage = (e)=> {
        if(!e.target.classList.contains('select')){
            const wrapper = document.querySelector('.wrapper');
            const tl = new TimelineMax({paused: true})
                .to(wrapper, 0.15, {height: '100vh', width: '100vw', left:0})
                .to(wrapper, 0.15, {borderBottomLeftRadius: '0%'});
            if(state){
                tl.reverse();
                setState(false);
            }
            else{
                tl.play();
                setState(true);
            }
        }
    }

Answer 1

我猜这是因为调用.reverse()时，时间轴的播放头位于时间轴的开头。尝试使用tl.progress(1).reverse();。如果没有演示，就无法确定这是问题所在。

Answer 2

我以这种方式解决了问题

const [state, setState] = useState(false);
    const menuManage = (e)=> {
        if(!e.target.classList.contains('select')){
            const wrapper = document.querySelector('.wrapper');
            const tl = new TimelineMax({paused: true})
                .to(wrapper, 0.15, {height: '100vh', width: '100vw', left:0})
                .to(wrapper, 0.15, {borderBottomLeftRadius: '0%'});
            if(!wrapper.animation) wrapper.animation = tl;
            state ? wrapper.animation.progress(1).reverse() : wrapper.animation.play();
            setState(!state);
        }
    }

每次单击时，我都会覆盖旧代码中的时间轴。

GSAP-reverse（）不回动画

2 个答案: