• TypeScript小状况之选且只选一个

    一、前言

    今天还是带大家实验gsap库，跟to、from、fromTo不同，今天的set和quickSetter都是0过渡动画，等于是直接修改元素状态的。

    二、函数

    1、 gsap.set

    gsap.set(参数1，参数2) 就是告诉动画对象，是从当前状态立刻变成什么状态

    • 参数1告知需要绑定哪个动画对象
    • 参数2就是要告知对象将变成的状态

    官网上给了例子，说这两个的效果是一致的，就很明显的说明了，set函数就是to函数设置duration为0的时候。

    gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0, x: 100, y: 50, opacity: 0}); 

    • 1
    • 2

    两者都支持多个对象的写法。

    比如下面这种写法，可以同时设置obj1，obj2，obj3，当然可以有obj4，obj5等等，同步去修改他们的状态

    gsap.set([obj1, obj2, obj3], {x: 100, y: 50, opacity: 0}); 

    • 1

    接下来让我们试试看吧

    这次我们新开一个vue文件，声明个变量

    let arr = [{left: 0},{left: 60},{left: 120},{left: 180}
] 

    • 1
    • 2

    v-for新建四个球