代码入如下：
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,
})
},