vue3 过渡动画和动画效果
动画:先放大 再消失
<template> <div class="app"> <div> <button @click="show = !show">切换button> div> <transition name="h1"> <h1 v-if="show">hello worldh1> <h1 v-else>你好啊,李银河h1> transition> div> template>
.app {
width: 400px; margin: 0 auto; } h1 { display: inline-block; } .h1-enter-from, .h1-leave-to { opacity: 0; } .h1-enter-to, .h1-leave-from { opacity: 1; } .h1-enter-active { transition: opacity 1s ease; } .h1-leave-active { transition: opacity 1s ease; }
//或使用动画
.h1-enter-active { animation: bounce 1s ease; } .h1-leave-active { animation: bounce 1s ease reverse; } @keyframes bounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }