vue3.0使用类过渡效果

需使用v-if或v-show触发

 <button @click="show = !show">过渡效果</button>
        <Transition name="gd">
            <h1 v-if="show">hello</h1>
        </Transition>




<script>
export default {
    data() {
        return {
            show: "true"
        }
    }
}
</script>
<style>
.gd-enter-active,
.gd-leave-active {
    transition: all 10s ease;
}

.gd-enter-from,
.gd-leave-to {
    opacity: 0;
    animation: bounce-in 5s infinite;
}
@keyframes bounce-in {
  0% {
    transform: translate(0px,0px);
    color:#f00;
  }
  25% {
    transform: translate(0px,100px);
    color:rgb(9, 247, 45);
  }
  50% {
    transform: translate(100px,100px);
    color:rgb(217, 252, 22);
  }
  75% {
    transform: translate(100px,0px);
    color:rgb(80, 9, 247);
  }
  100% {
    transform: translate(0px,0px);
    color:rgb(9, 195, 247);
  }
}
</style>