<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition>
<h1 v-show="isShow" class="come">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: orange;
}
/* 动画 */
@keyframes donghua {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
.v-enter-active{
animation: donghua 1s linear;
}
.v-leave-active {
animation: donghua 1s linear reverse;
}
</style>
vue实现简单的动画切换----显示/隐藏
最新推荐文章于 2024-04-29 03:31:56 发布