如何在vue.js中制作按钮动画

<template>
  <div>
    <transition name="button-animation">
      <button v-if="showButton" @click="toggleButton">按钮</button>
    </transition>
  </div>
</template>

<style>
.button-animation-enter {
  opacity: 0;
  transform: translateY(20px);
}

.button-animation-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.button-animation-enter-active,
.button-animation-leave-active {
  transition: all 0.3s ease;
}
</style>

<script>
export default {
  data() {
    return {
      showButton: true
    };
  },
  methods: {
    toggleButton() {
      this.showButton = !this.showButton;
    }
  }
};
</script>