自定义动画的名字
作者:
椰果粒 | 来源:发表于
2018-08-03 17:15 被阅读0次<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>
本文标题：自定义动画的名字
本文链接：https://www.haomeiwen.com/subject/mxdyvftx.html
网友评论