<head>
<style>
/* 使用keyframe形式的动画 */
@keyframes bounce-in{
0% {
transform: scale(0);
}
50% {
transform: scale(1.2)
}
100%{
transform: scale(1)
}
}
.active{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="app">
<!-- 自定义动画的名字 -->
<transition
name="fade"
enter-active-class="active"
leave-active-class="leave"
>
<div v-show="show">hello world</div>
</transition>
<button @click="handleChange">显示与隐藏</button>
</div>
</div>
网友评论