十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了微信小程序实现CSS3动画下拉菜单效果的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序实现CSS3动画下拉菜单效果的方法文章都会有所收获,下面我们一起来看看吧。
成都创新互联公司成立与2013年,是专业互联网技术服务公司,拥有项目成都做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元南郑做网站,已为上家服务,为南郑各地企业和个人服务,联系电话:18982081108
思路
利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,里面嵌套的列表元素被完全隐藏,相当于菜单关闭。而当view元素的高度大于列表元素的高度时,相当于菜单显示。
效果图
wxml
button按钮用于触发菜单的打开和关闭,first_click参数使用户第一次点击按钮之前菜单不可见,state参数用于控制菜单的打开和关闭状态
历 史 记 录 111 222 333
css
使用@keyframes动画实现菜单的渐变打开和关闭动画
#box{ width: 100%; border-top: 1px solid #ddd; overflow: hidden; height: 0; animation-fill-mode: forwards; } #item_list{ background-color: white; width: 100%; } #item_list view{ text-align: right; overflow: auto; white-space: nowrap; } @keyframes slidedown{ from { height: 0; } to { height: 240rpx; } } @keyframes slideup{ from { height: 240rpx; } to { height: 0; } } .open{ animation: slidedown 1s; } .close{ animation: slideup 1s; } .hide{ display: none; } .show{ display: block; }
js
页面加载完成时,菜单初始状态为隐藏和关闭,用户一旦点击按钮,菜单就显示,并逐渐打开
data: { state:false, first_click:false, }, toggle: function(){ var list_state = this.data.state, first_state = this.data.first_click; if (!first_state){ this.setData({ first_click: true }); } if (list_state){ this.setData({ state: false }); }else{ this.setData({ state: true }); } }
关于“微信小程序实现CSS3动画下拉菜单效果的方法”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“微信小程序实现CSS3动画下拉菜单效果的方法”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。