GSAP

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() 不动画返回

GSAP - reverse() don't animate back

javascript

reactjs