学习总结

2024-07-07 07:46| 来源: 网络整理| 查看: 265

【背景】小程序需求中涉及了一个actionsheet半屏菜单，和一个滚动时候需要隐藏一半的icon，所以要求添加从底部滑出，从右侧滑出的动画效果。需要从底部滑出的半屏菜单是带黑色遮罩的模态弹窗页面，需要从右侧滑出的是悬浮的icon，我们使用了uniapp的框架，所以模板部分写法和vue类似

【关键字】css的animation，我是文档的搬运工CSS animation 属性

【底部滑出】

模板部分——一般的模态窗会直接设置显示隐藏，但是需要底部滑出的动画效果，内容区域不能直接通过控制dom显示隐藏来设置，会显得比较生硬，所以通过设置过渡动画来搞

你的内容

样式部分

我这边设置的匀速

/* 显示或关闭动画*/ .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; } }

特此记录

【本文地址】

公司简介

联系我们