前言
在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库怎么手动原生方式去实现呢,最主要的是怎么去实现动画css3 实现动画
如下是wxml代码

弹出底部弹出框
弹出顶部提示框

底部弹出内容

通知内容

弹出底部弹出框
弹出顶部提示框

底部弹出内容

通知内容

如下是wxss代码
/* pages/customalertbox/customalertbox.wxss */
.click-btn {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
}

.top-box {
width: 100%;
height: 30px;
background: #f56c6c;
border-radius: 0 0 8px 8px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 28rpx;
position: absolute;
top: 0px;
left: 0;
animation-duration: 0.5s;
animation-name: slidetop;
}

.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}

.pop {
position: absolute;
width: 100%;
height: 180px;
background: #42b983;
border-radius: 8px 8px 0 0;
position: absolute;
bottom: 0px;
animation-duration: 0.5s;
animation-name: slidein;
}

@keyframes slidein {
from {
transform: translateY(70%);
}
to {
transform: translateY(0);
}
}

@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
/* pages/customalertbox/customalertbox.wxss */
.click-btn {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
}

.top-box {
width: 100%;
height: 30px;
background: #f56c6c;
border-radius: 0 0 8px 8px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 28rpx;
position: absolute;
top: 0px;
left: 0;
animation-duration: 0.5s;
animation-name: slidetop;
}

.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}

.pop {
position: absolute;
width: 100%;
height: 180px;
background: #42b983;
border-radius: 8px 8px 0 0;
position: absolute;
bottom: 0px;
animation-duration: 0.5s;
animation-name: slidein;
}

@keyframes slidein {
from {
transform: translateY(70%);
}
to {
transform: translateY(0);
}
}

@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}如下是逻辑代码
// pages/customalertbox/customalertbox.js
Page({
/**
* 页面的初始数据
*/
data: {
isBottom: false,
isTop: false,
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},

onBottomBox() {
this.setData({
isBottom: true,
});
},

onHideBox() {
this.setData({
isBottom: false,
});
},

onTopBox() {
this.setData({
isTop: true,
});

setTimeout(() => {
this.setData({
isTop: false,
});
}, 2000);
},
});
// pages/customalertbox/customalertbox.js
Page({
/**
* 页面的初始数据
*/
data: {
isBottom: false,
isTop: false,
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},

onBottomBox() {
this.setData({
isBottom: true,
});
},

onHideBox() {
this.setData({
isBottom: false,
});
},

onTopBox() {
this.setData({
isTop: true,
});

setTimeout(() => {
this.setData({
isTop: false,
});
}, 2000);
},
});在小程序中实现动画,如上实现的动画,是通过css3中的@keyframes实现的,如下所示
.pop {
/* ... */
animation-duration: 0.5s;
animation-name: slidein; // 动画的名称
}

@keyframes slidein {
// 定义动画的名称
from {
transform: translateY(70%); // 平移,垂直方向上
}
to {
transform: translateY(0);
}
}

.top-box {
/* ... */
animation-duration: 0.5s;
animation-name: slidetop;
}

@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
.pop {
/* ... */
animation-duration: 0.5s;
animation-name: slidein; // 动画的名称
}

@keyframes slidein {
// 定义动画的名称
from {
transform: translateY(70%); // 平移,垂直方向上
}
to {
transform: translateY(0);
}
}

.top-box {
/* ... */
animation-duration: 0.5s;
animation-name: slidetop;
}

@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}通过 css3 中的@keyframes以及变换transform,垂直方向上平移,实现动画示例效果如下所示以上是通过 css3 的动画animation结合@keyframes动画帧实现的,那么在小程序当中,也可以通过官方的动画API实现的小程序动画 API-实现动画
创建一个动画实例 animation,调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性示例效果如下所示如下是实例代码

弹出底部弹出框
弹出顶部提示框
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>

底部弹出内容

弹出底部弹出框
弹出顶部提示框
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>

底部弹出内容

主要是给想要添加动画的元素添加了一个animation属性,现在的动画是通过js去控制,而非css如下代码所示
// pages/customalertbox/customalertbox.js
Page({
/**
* 页面的初始数据
*/
data: {
isBottom: false,
isTop: false,
animationData: {}, // 定义动画对象
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},

onBottomBox() {
// 创建动画
var animation = wx.createAnimation({

duration: 2000,

timingFunction: 'ease',
});

this.animation = animation;
// 先在y轴偏移180，然后用step()完成一个动画
animation.translateY(180).step();
this.setData({

animationData: animation.export(),

isBottom: true,
});

// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动,回到初始位置
setTimeout(() => {

animation.translateY(0).step();

this.setData({

animationData: animation.export(),

});
}, 200);
},

// 点击遮罩层隐藏弹框
onHideBox() {
var animation = wx.createAnimation({

duration: 2000,

timingFunction: 'ease',
});
this.animation = animation;
// 先在y轴偏移180，然后用step()完成一个动画
animation.translateY(180).step();
this.setData({

animationData: animation.export(),
});
setTimeout(() => {

animation.translateY(0).step();

this.setData({

animationData: animation.export(),

isBottom: false,

});
}, 200);
},

onTopBox() {
this.setData({

isTop: true,
});

setTimeout(() => {

this.setData({

isTop: false,

});
}, 2000);
},
});
// pages/customalertbox/customalertbox.js
Page({
/**
* 页面的初始数据
*/
data: {
isBottom: false,
isTop: false,
animationData: {}, // 定义动画对象
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},

onBottomBox() {
// 创建动画
var animation = wx.createAnimation({

duration: 2000,

timingFunction: 'ease',
});

this.animation = animation;
// 先在y轴偏移180，然后用step()完成一个动画
animation.translateY(180).step();
this.setData({

animationData: animation.export(),

isBottom: true,
});

// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动,回到初始位置
setTimeout(() => {

animation.translateY(0).step();

this.setData({

animationData: animation.export(),

});
}, 200);
},

// 点击遮罩层隐藏弹框
onHideBox() {
var animation = wx.createAnimation({

duration: 2000,

timingFunction: 'ease',
});
this.animation = animation;
// 先在y轴偏移180，然后用step()完成一个动画
animation.translateY(180).step();
this.setData({

animationData: animation.export(),
});
setTimeout(() => {

animation.translateY(0).step();

this.setData({

animationData: animation.export(),

isBottom: false,

});
}, 200);
},

onTopBox() {
this.setData({

isTop: true,
});

setTimeout(() => {

this.setData({

isTop: false,

});
}, 2000);
},
});以上就是通过微信小程序中动画API实现的完成的动画,代码要比 css3 要多一些,可以实现更加复杂的动画效果注意注意注意如果是底部弹出框,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="true"即可解决

弹出底部弹出框
catchtouchmove="true"
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>

底部弹出内容

弹出底部弹出框
catchtouchmove="true"
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>

底部弹出内容

结语
在小程序当中实现动画可以用css3的animation结合@keyframes实现,同样也可以通过小程序动画的api去实现