vue中使用gsap的动画插件

gsap 动画

TweenMax基础案例

• npm install / yarn add 二选一

  npm install gsap --save
  yarn add gsap

• component.vue局部引入，哪里需要哪里搬

  <template>
      <div> 
          <div id="demo">
              <p>以下例子每个动画的开始时间按0.5s 错开。TweenLite没有stagger。</p>
              <div class="box green"></div>
              <div class="box grey"></div>
              <div class="box orange"></div>
              <div class="box green"></div>
              <div class="box grey"></div>
              <div class="box orange"></div>
              <div class="box green"></div>
              <div class="box grey"></div>
              <div class="box orange"></div>
          </div>
          <el-button @click="showTest()">开始</el-button>
      </div> 
  <template>
  <script>
      import { TweenLite, TweenMax } from 'gsap'
      export default {
          methods: {
              showTest: function(){
                  //TweenMax、TimelineLite、TimelineMax可以使用stagger（错开动画），TweenLite则没有。
                  TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);
              }
          }
      };
  </script>