vue transition group

相同的element套上一樣的animate

<transition-group appear name="slide-up" tag="ul">
   <li :key="i" v-for="i in list">{{ i }}</li>
</transition-group>

.slide-up-enter {
  transform: translateY(10px);
  opacity: 0;
}
.slide-up-enter-active {
  transition: 0.2s ease;
}

v-move

.slide-up-move {
  transition: transform 0.5s ease;
}

---

Velocity

動畫套件

GSAP (GreenSock)

動畫套件

$ yarn add gsap

import gsap from 'gsap';

<transition
      appear=""
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
    >
      <div class="box"></div>
</transition>

beforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "scale(0,0)";
},
enter(el, done) {
  gsap.to(el, {
    duration: 1,
    opacity: 1,
    scale: 1,
    onComplete: done
  });
}

照順序顯示動畫

關鍵字：stagger (單位：秒)

  mounted() {
    gsap.from(".box--item", {
      duration: 0.5,
      opacity: 0,
      scale: 0,
      y: 200,
      ease: "power1",
      stagger: 0.1
    });
  }

stagger options

stagger: {
    each: 0.1,
    from: "center" // start, end, center, edges, ramdon
}

改動data的值

可做跳數字

  watch: {
    number(newVal) {
      gsap.to(this.$data, {
        duration: 1,
        ease: "circ.out",
        tweenedNumber: newVal
      });
    }
  },

timeline

'<' 使動畫的初始跟上一個一樣，一起出發

  mounted() {
    let tl = gsap.timeline();
    tl.to(".first", { x: 700, duration: 2, ease: "expo.out" });
    tl.to(".second", { x: 700, duration: 2, ease: "expo.out" }, "<");
    tl.to(".third", { x: 700, duration: 2, ease: "expo.out" });
  }

'-=1' 比上一個晚一秒出發

tl.to(".second", { x: 700, duration: 2, ease: "expo.out" }, "-=1");

'0.5' 直接在0.5秒後出發

tl.to(".second", { x: 700, duration: 2, ease: "expo.out" }, 0.5);

重複

let tl = gsap.timeline({ repeat: 2, repeatDelay: 1 });