如上图所示，废话不多说，直接上代码
一、WXML
<view class="menu-box">
<view class="navbar {{ play?'active':'' }}">
<view class="btn" bindtap="changePlay">
<view class="line" animation="{{ !play?line1CloseAn:line1OpenAn }}"></view>
<view class="line" animation="{{ !play?line2CloseAn:line2OpenAn }}"></view>
<view class="title" animation="{{ !play?titleCloseAn:titleOpenAn }}">
菜单
</view>
</view>
</view>
<view class="menu">
<view animation="{{ !play?btn4Close:btn4Open }}">
<text>我的</text>
<view animation="{{ !play?btn3Close:btn3Open }}">
<text>购物</text>
<view animation="{{ !play?btn2Close:btn2Open }}">
<text>个人</text>
<view animation="{{ !play?btn1Close:btn1Open }}">
<text>哈哈</text>
</view>
二、WXSS中
.menu-box {
position: fixed;
bottom: 40vw;
right: 30rpx;
width: 100rpx;
padding-bottom: 100rpx;
}
.menu-box .navbar {
z-index: 1000;
position: absolute;
bottom: 0rpx;
height: 100rpx;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-size: 0rpx;
border-radius: 50%;
.menu-box .navbar>.btn {
padding: 25rpx;
width: 100%;
height: 100%;
box-sizing: border-box;
.menu-box .navbar>.btn>.line {
height: 6rpx;
background-color: white;
margin: 0px 2rpx 6rpx 2rpx;
border-radius: 6rpx;
.menu-box .navbar>.btn>.title {
font-size: 20rpx;
.menu-box .active {
background-color: pink;
.menu-box .menu{
/* width: 100rpx; */
/* overflow: hidden; */
position: relative;
/* margin: 0 auto; */
bottom: -100rpx;
.menu-box .menu>view {
z-index: 100;
margin-bottom: 20rpx;
line-height: 100rpx;
margin-left: auto;
margin-right: auto;
opacity: 0;
color: red;
.menu-box .menu>view text{
display: inline-block;
width:100%;
z-index: 10000;
font-size: 25rpx;
三js中
Component({
data: {
play: false
},
properties: {},
methods: {
changePlay(){
let flag = !this.data.play;
this.setData({
play:flag
});
//start title
let titleOpenAn = wx.createAnimation({
duration: 300,
timingFunction: 'forwards',
delay: 0,
transformOrigin: '50% 50% 0'
titleOpenAn.opacity(0).step();
titleOpenAn:titleOpenAn.export()
let titleCloseAn = wx.createAnimation({
titleCloseAn.opacity(1).step();
titleCloseAn:titleCloseAn.export()
//end title
// start 第一条line
let line1OpenAn = wx.createAnimation({
line1OpenAn.translateY(12).rotate(45).scale(1.4, 1).step();
line1OpenAn:line1OpenAn.export()
let line1CloseAn = wx.createAnimation({
transformOrigin: '12rpx 50%'
line1CloseAn.translateY(0).rotate(0).scale(1, 1).step();
line1CloseAn:line1CloseAn.export()
//end 第一条line
// start 第二条line
let line2OpenAn = wx.createAnimation({
transformOrigin: '100% 0'
line2OpenAn.translateY(-6.5).translateX(-1).rotate(-45).scale(1.4, 1).step();
line2OpenAn:line2OpenAn.export()
let line2CloseAn = wx.createAnimation({
transformOrigin: '46rpx 50%'
line2CloseAn.translateY(0).rotate(0).scale(1, 1).step();
line2CloseAn:line2CloseAn.export()
//end 第二条line
//start 第一个按钮
let btn1Open = wx.createAnimation({
btn1Open.translateX(-60).opacity(1).step();
btn1Open:btn1Open.export()
let btn1Close = wx.createAnimation({
btn1Close.translateX(0).opacity(0).step();
btn1Close:btn1Close.export()
//end 第一个按钮
//start 第二个按钮
let btn2Open = wx.createAnimation({
duration: 500,
btn2Open.translateX(-120).opacity(1).step();
btn2Open:btn2Open.export()
let btn2Close = wx.createAnimation({
btn2Close.translateX(0).opacity(0).step();
btn2Close:btn2Close.export()
//end 第二个按钮
//start 第三个按钮
let btn3Open = wx.createAnimation({
duration: 700,
btn3Open.translateX(-180).opacity(1).step();
btn3Open:btn3Open.export()
let btn3Close = wx.createAnimation({
btn3Close.translateX(0).opacity(0).step();
btn3Close:btn3Close.export()
//end 第三个按钮
//start 第四个按钮
let btn4Open = wx.createAnimation({
btn4Open.translateX(-240).opacity(1).step();
btn4Open:btn4Open.export()
let btn4Close = wx.createAnimation({
btn4Close.translateX(0).opacity(0).step();
btn4Close:btn4Close.export()
//end 第四个按钮
}
}
})