vue 使用gsap(TweenMax)


第一步 npm install gsap

之后页面中引用

import {TweenMax, gsap,TweenLite} from 'gsap'

可以watch监听属性：(这是图片旋转)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 // TweenMax.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
      // TweenLite.to("#m_left", 1, {width: 100});
      // TweenLite.to("#m_i", 1, {width: 100});
      // this.$refs.m_left
      TweenMax.from('#m_i', 1, {
        scale: 1,
      });
      console.log(1111,newValue);
      if(newValue == 24){
        TweenMax.to('#m_i', 1, {
          rotation: 0,
        });
      }else{
        TweenMax.to('#m_i', 1, {
          rotation: 90,
        });
      }

TweenMax.from('h1', 3, {
    scale: 0,
    rotation: -360,
    y: 300,
    letterSpacing: '200px'
});
TweenMax.to('h1', 2, {
    opacity: 0,
    delay: 3
});