vue中实现按钮添加动态效果

将别人写的css按钮效果用vue实现 

<template>
<button class="bubbly-button" :class="activeClass ==true?'animate':''" @click="gethome()">立即下载</button>
</template>
<script>
export default {
    data(){
        return {
            activeClass:false
        }
    },
    methods:{
        gethome(){
         //添加时间延时，可以消除点击按钮时的伪元素
          setTimeout(()=>{
           this.activeClass = true;
          },200);
         
        }
    }

}
</script>
<style lang="scss" scoped>
 .bubbly-button {
  width: 1.91rem;
    height: 0.56rem;
    color: #fff;
    background-color:#d26864 ;
    border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  //box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  position: absolu