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}); 

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

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

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

接下来让我们试试看吧

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

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

v-for新建四个球

<template><div @click="gsapSet">点击触发gsap.set函数</div><div v-for="(item,index) in arr" class="ball" :style="{left: item.left + 'px'}" :key="