css链式动画效果使用之gsap库

1.局部或全局引入

2.vue中代码示例

//创建时间轴对象
const tl = new TimelineMax();
//使用api
  tl
    // Ground
     .staggerFrom(
     [
    "#Capa_1 > g > path:nth-child(1)",
         "#Capa_1 > circle:nth-child(7)",
         "#Capa_1 > path:nth-child(6)",
         "#Capa_1 > circle:nth-child(5)",
       ],
       1,
       {
         scaleY: 0,
         scaleX: 0,
         transformOrigin: "center",
         ease: Bounce.easeOut,
         stagger: 0.2
       }
     )
    .staggerFrom(
      [
        // "#Capa_1 > path:nth-child(3)", "#Capa_1 > path:nth-child(2)",
        "#car1",
        "#car2",
      ],
      1,
      { ease: Bounce.easeOut, stagger: 0 ,opacity: 0},
      // { scaleX: 0.9,scaleY: 0.9, transformOrigin: "left", ease: Bounce.easeOut, stagger: 0 ,opacity: 0}
    )
    .staggerFrom(
      [
        "#arrow1",
        ".arrowHead1",
        "#arrow2",
        ".arrowHead2",
        "#arrow3",
        ".arrowHead3",
        "#arrow4",
        ".arrowHead4",
        "#arrow5",
        ".arrowHead5",
      ],
      3,
      { ease: Bounce.easeOut, stagger: 0.2 ,opacity: 0},
      // { scaleX: 0.6,scaleY: 1, transformOrigin: "left", ease: Bounce.easeOut, stagger: 0.3 ,stroke: "#00e5f7"}
    )
    // .from("#Capa_1 > path:nth-child(4)", 1, {
    //   scaleY: 0,
    //   transformOrigin: "bottom",
    //   ease: Bounce.easeOut
    // })

在本示例中，sraggerFrom()接受一个含有element选择器的array作为第一参数，接受一个数值（代表动画持续时间）作为第二参数，接受一个包含css属性的对象作为第三参数。

对比css3，最好用的是参数1的多项选择器和参数3中的stagger（执行间隔时间）,执行后的动画会按array中选择器顺序执行，并以stagger时间为间隔执行，以制造链式动画效果。