css3做的显示隐藏面板

代码入如下：

wxml：

<button bindtap='btn'> 点击 </button>

<view class='view {{bgmImgAni}}'></view>

 

 

css：

.view {

width: 100%;

height: 50%;

background: gray;

position: absolute;

z-index: 999;

bottom: -50%;

left: 0;

}

 

.bgmImgAni {

animation: jumpball 0.3s linear;

animation-fill-mode: forwards; /* // 保留动画最后一帧 */

}

 

@keyframes jumpball {

100% {

bottom: 0;

}

}

 

.bgmImgAni12 {

animation: jumpball12 0.3s linear;

animation-fill-mode: forwards; /* // 保留动画最后一帧 */

}

 

@keyframes jumpball12 {

0% {

bottom: 0;

}

}

js：

data:{

aa :true,

}

点击事件

 

btn(e) {

var that = this;

var aa = that.data.aa;

var bgmImgAni;

if (aa) {

bgmImgAni = "bgmImgAni";

aa = false;

} else {

bgmImgAni = "bgmImgAni12"

aa = true;

}

that.setData({

bgmImgAni: bgmImgAni,

aa: aa,

})

},