微信提供了动画api，就是下面这个
相关链接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject
通过使用这个创建动画的api，可以做出很多特效出来
下面介绍一个抽屉菜单的案例
实现代码：
wxml：
-
-
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
-
-
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
-
-
-
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
-
-
<view class="drawer_content">
-
<view class="drawer_title line">菜单1</view>
-
<view class="drawer_title line">菜单2</view>
-
<view class="drawer_title line">菜单3</view>
-
<view class="drawer_title line">菜单4</view>
-
<view class="drawer_title">菜单5</view>
-
</view>
-
</view>
wxss：
-
-
.btn {
-
width: 80%;
-
padding: 20rpx 0;
-
border-radius: 10rpx;
-
text-align: center;
-
margin: 40rpx 10%;
-
background: #0C1939;
-
color: #fff;
-
}
-
-
.drawer_screen {
-
width: 100%;
-
height: 100%;
-
position: fixed;
-
top: 0;
-
left: 0;
-
z-index: 1000;
-
background: #000;
-
opacity: 0.2;
-
overflow: hidden;
-
}
-
-
.drawer_attr_box {
-
width: 100%;
-
overflow: hidden;
-
position: fixed;
-
bottom: 0;
-
left: 0;
-
z-index: 1001;
-
background: #fff;
-
}
-
.drawer_content {
-
邀请
原作者: 模板之家
来自: 网络收集
