仿优酷菜单动画展开效果
防优酷菜单的动画效果，层叠式弹出+平滑缩放，视觉还挺抓眼球的。我自己撸了一套，主要是仿优酷圆盘菜单的思路，切换自然、响应也快，关键是结构清爽，维护起来不费劲。
菜单的核心思路是用transform: scale搭配transition搞定动画效果，点击主按钮后，菜单项会顺势展开，像扇子那样铺开，动画过程不卡顿。你也可以加点opacity过渡，让效果更柔和。
适合做工具类 APP、视频类导航、或者你想让菜单动起来的场景。写的时候参考了不少案例，比如优酷圆盘旋转菜单高仿和自定义优酷菜单，你也可以看看思路。
JS 部分用的原生加一点点jQuery，像$('.menu-item')控制每个子菜单的显隐状态。逻辑不复杂，几百行代码，注释也挺清楚，新手也能上手。
哦对了，如果你用的是 Android 原生开发，可以参考这篇Android 实现优酷动画菜单布局，思路类似，但实现方式不同，适合类比着看。
，如果你正好想搞个动态菜单，或者仿优酷那一套，不妨下下来试试看，调一调参数，说不定就能用在你项目里了～
文件大小：408.71KB
评论区