【背景】小程序需求中涉及了一个actionsheet半屏菜单,和一个滚动时候需要隐藏一半的icon,所以要求添加从底部滑出,从右侧滑出的动画效果。需要从底部滑出的半屏菜单是带黑色遮罩的模态弹窗页面,需要从右侧滑出的是悬浮的icon,我们使用了uniapp的框架,所以模板部分写法和vue类似
【关键字】css的animation,我是文档的搬运工CSS animation 属性
【底部滑出】
模板部分——一般的模态窗会直接设置显示隐藏,但是需要底部滑出的动画效果,内容区域不能直接通过控制dom显示隐藏来设置,会显得比较生硬,所以通过设置过渡动画来搞
<div
class="content"
:class="{
'open': visible,
'close': !visible
}"
>
你的内容
</div>
样式部分
我这边设置的匀速?
/* 显示或关闭动画*/
.open {
animation: slideContentUp 0.3s linear both;
}
.close {
animation: slideContentDown 0.3s linear both;
}
/* 动态设置高度 */
@keyframes slideContentUp {
from {
height: 0;
}
to {
height: 80vh;
}
}
@keyframes slideContentDown {
from {
height: 80vh;
}
to {
height: 0;
}
}
然后底部遮罩层会有问题,所以为了适配动画,给模态层添加了监听到内容区域visible隐藏后,延迟动画0.3s后隐藏,这样动画回收效果完成后,遮罩再去掉就好多了~
【右侧滑出】
和从底部滑出类似,不过height改为设置宽度,同样不需要设置v-if这种显示隐藏,通过样式控制
/* 显示或关闭动画*/
.open {
animation: left 0.3s ease-in both;
}
.close {
animation: right 0.3s ease-in both;
}
@keyframes left {
from {
width: 50px; /*最小的宽度,隐藏就写0,我这边图标静止需要一个宽度*/
}
to {
width: 250px;/*最大展开的宽度*/
}
}
@keyframes right {
from {
width: 250px;
}
to {
width: 50px;
}
}
特此记录
|