bounce.js使用

<template>
    <div class="chapter-4">
        <div class="bounce-box" ref="bounce_box"></div>
        <div class="btn_container">
             <el-button type="primary" @click="scale()" round>scale</el-button>
             <el-button type="primary" @click="rotate()" round>rotate</el-button>
             <el-button type="primary" @click="translate()" round>translate</el-button>
             <el-button type="primary" @click="skew()" round>skew</el-button>
             <el-button type="primary" @click="full()" round>full</el-button>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
  mounted () {    
  },
  methods:{
      scale(){
        var bounce = new Bounce();
        console.log(bounce)
        bounce.scale({
        from: { x: 0.5, y: 0.5 },
        to: { x: 1, y: 1 }
        })
        bounce.applyTo(this.$refs.bounce_box)
      },
      rotate(){
        var bounce = new Bounce();
        // var saver=this.face
        // this.face=this.back
        this.back=saver
        bounce.rotate({
        from: 0,
        to: 180
        });
        bounce.applyTo(this.$refs.bounce_box)
      },
      translate(){
        var bounce = new Bounce();
        bounce.translate({
        from: { x: 0, y: 0 },
        to: { x: 100, y: 0 }
        });
        bounce.applyTo(this.$refs.bounce_box)
      },
      skew(){
        var bounce = new Bounce();
        bounce.skew({
        from: { x: 0, y: 0 },
        to: { x: 20, y: 0 }
        });
        bounce.applyTo(this.$refs.bounce_box)
      },
      full(){
            var bounce = new Bounce();
            bounce
            .translate({
                from: { x: -300, y: 0 },
                to: { x: 0, y: 0 },
                duration: 600,
                stiffness: 4
            })
            .scale({
                from: { x: 1, y: 1 },
                to: { x: 0.1, y: 2.3 },
                easing: "sway",
                duration: 800,
                delay: 65,
                stiffness: 2
            })
            .scale({
                from: { x: 1, y: 1},
                to: { x: 5, y: 1 },
                easing: "sway",
                duration: 300,
                delay: 30,
            })
            .applyTo(document.querySelectorAll(".bounce-box"))
            }
  },
  data(){
      return {
          bounce:null,
          face:0,
          back:180
      }
  }
}
</script>

<style scoped lang="scss">
.chapter-4{
    width: 100%;
    height: 100%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    .bounce-box{
        width: 150px;
        height: 150px;
        margin:0  auto;
        background-color: red;
        border-bottom: 5px solid green;
        animation: my-animation 1s linear both;
    }
    .btn_container{
        position: absolute;
        bottom:0;
        left: 0;
    }
}
</style>