如何自定义实现小程序动画弹框/提示框
这篇文章将为大家详细讲解有关如何自定义实现小程序动画弹框/提示框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站建设、做网站收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了10余年的成都创新互联网站建设公司。
如何自定义实现小程序动画弹框/提示框
css3 实现动画
如下是wxml代码
弹出底部弹出框
弹出顶部提示框
底部弹出内容
通知内容
/* 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);
},
});.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,垂直方向上平移,实现动画
示例效果如下所示
掘金不支持gif-实例效果可戳链接
以上是通过css3的动画animation结合@keyframes动画帧实现的,那么在小程序当中,也可以通过官方的动画API实现的
小程序动画 API-实现动画
创建一个动画实例 animation,调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性
示例效果如下所示
掘金不支持gif-实例效果可戳链接
如下是实例代码
弹出底部弹出框
弹出顶部提示框
