Vue 搭配GSAP实现颜色动态渐变

合集 - vue(2)

1.Vue 搭配GSAP实现颜色动态渐变2024-01-31

2.使用pnpm、monorepo 来构建 vue + 独立组件库项目2024-09-17

收起

重点

使用reactive构造响应式的对象存储颜色，使用gsap.to操作响应式对象实现颜色渐变

代码

        let toTimeLine: Tween
        let overTimeLine: Tween
        type Color = {value: string}
        type Tween = gsap.core.Tween
        const addItemColor = reactive<Color>({
            value: 'rgb(212, 212, 212)'
        })
        const addItemColorList = reactive<Color[]>([
            {value: 'rgb(212, 212, 212)'},
            {value: 'rgb(144, 144, 144)'},
        ])
        // 鼠标移入控制颜色渐变
        const addEnter = () => {
            overTimeLine && overTimeLine.kill();
            toTimeLine = gsap.to(addItemColor, {
                value: addItemColorList[1].value,
                duration: 0.3,
            })
        }
        // 鼠标移出控制颜色渐变
        const addLeave = () => {
            toTimeLine && toTimeLine.kill();
            toTimeLine = gsap.to(addItemColor, {
                value: addItemColorList[0].value,
                duration: 0.3,
            })
        }