幽灵资源网 Design By www.bzswh.com
效果
思路
用css的animation属性做动画
代码
wxml：
<view class="container">
<view class='anit {{show == 1?"show":(show == 2?"hide":"")}}'>请选择商品</view>
<view bindtap='anniu'>点击弹出提示</view>
</view>
wxss：
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.anit{
width: 100%;
height: 70rpx;
background: red;
position: absolute;
color: white;
font-size: 30rpx;
line-height: 70rpx;
top: -70rpx;
text-align: center;
}
.show{
top: 0rpx;
animation: show 0.2s;
animation-timing-function:ease;
}
@keyframes show
{
from {top:-70rpx;}
to {top:0rpx;}
}
.hide{
top: -70rpx;
animation: hide 0.2s;
animation-timing-function:ease;
}
@keyframes hide
{
from {top:0rpx;}
to {top:-70rpx;}
}
js：
Page({
data: {
show: 0
},
onLoad: function () {
},
anniu:function(e){
let that = this;
this.setData({
show:1
})
setTimeout(function () {
that.setData({
show: 2
})
}, 2000)
}
})
总结
以上所述是小编给大家介绍的纯CSS实现微信小程序仿QQ顶部提示弹框动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
标签：
微信小程序,,提示弹框,动画
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。