<transition name="plus-icon">
<view class="detail_container" v-show="detailShow"></view>//套住要显示隐藏的盒子
</transition>
//css样式
.plus-icon-enter-active {
/* transition: all 0.5s;
*/
animation: axisYin 1s;
}
.plus-icon-enter {
/* opacity: 0; */
}
.plus-icon-leave-active {
/* transition: opacity 0.5s;
*/
}
.plus-icon-leave-to {
/* opacity: 0; */
animation: axisYont 1s ;
}
@keyframes axisYin {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
@keyframes axisYont {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
v-if\v-show滑入滑出效果
最新推荐文章于 2024-03-18 14:06:57 发布