[2016-10-18]
官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html
改为动画版，须要要知足平移动画与背景遮罩。思路如下：
1.二级菜单初始隐藏且地位位于手机屏幕之外
2.当点击一级菜单时，二级菜单平移向下，直到二级菜单上边沿与一级菜单下边沿平齐,北京微信小程序开发细节你必须注意。应用linear动画
3.点击自身或其他一级菜单，做逆操作
4.背景遮罩，应用ease-in/ease-out动画
步调1 改革样式表，top值
步调2 声明动画
核心代码：
` animation: function(index) { // 定义一个动画 var animation = wx.createAnimation({ duration: 400,微信小程序开发指南是微信公众平台正式发布的一份小程序开发指南,最近微信小程序的上线在圈内真是掀起了一场大风波, timingFunction: 'linear', }) // 是显示照样隐藏 var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1 // flag = 1 console.log(flag) // 使之Y轴平移 animation.translateY(flag * (initSubMenuHighLight[index].length * 34) + 8).step // 导出到数据，绑定给view属性 this.setData({ animationData:animation.export }) }
完成动画后，需调用一次step，不论是一组照样多组都须要调。
步调3 声明data数组并与wxml绑定
` animationData: {}
wxml中
```
```
z-index问题，会盖住一级菜单，设置为-999，可以置于一级菜单之下
应用bottom: 0初始在一级菜单底边沿平齐。
dl 设置为position: relative 与二级菜单 position: absolute 对应。
步调4 点击一级菜单调用动画
` // 设置动画 this.animation(index)
``
步调5 点击二级菜单调用动画
` // 设置动画 this.animation(indexArray[0])
``
步调6 display属性要改为visibility
``` / 显示与隐藏 / .show { / display: block / visibility: visible }
,在可预见的将来,微信小程序自助开发肯定会有很大的市场,谁能尽快掌握这一技能,谁就能赚到第一桶金.hidden { / display: none / visibility:hidden } ```
保存占位，宽度高度，不然点击没了动画后果。
源码下载：存眷下方的"大众,"号-答复数字1006
对小法度榜样开辟有趣的同伙存眷"大众,"号: huangxiujie85，QQ群: 575136499，微信: small_application，陆续还将推出更多作品。
欢迎访问井中影评,井中影评,电影评论,影评,战马影评,电影资讯
删除。
网友评论 ()条 查看