效果
先看效果:
核心代码
算是一种典型的命令式的使用方式。
function startMenuLineAnimation(_collapsed: boolean) {
const topClassSelector = '.gsap-top-line';
const middleClassSelector = '.gsap-middle-line';
const bottomClassSelector = '.gsap-bottom-line';
const tl = gsap
.timeline({ repeat: 0 })
.to(topClassSelector, {
rotate: `${_collapsed ? '' : '-'}18reg`,
duration: 0.2,
})
.to(topClassSelector, {
rotate: '0reg',
duration: 0.2,
delay: 0.2,
});
tl.play();
const tl2 = gsap
.timeline({ repeat: 0 })
.to(bottomClassSelector, {
rotate: `${_collapsed ? '-' : ''}18reg`,
duration: 0.2,
})
.to(bottomClassSelector, {
rotate: '0reg',
duration: 0.2,
delay: 0.2,
});
tl2.play();
const tl3 = gsap
.timeline({ repeat: 0 })
.to(middleClassSelector, {
scaleX: 0.5,
x: _collapsed ? -4 : 4,
duration: 0.2,
})
.to(middleClassSelector, {
scaleX: 1,
x: 0,
duration: 0.2,
delay: 0.2,
});
tl3.play();
}
Comments NOTHING