纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果-创新互联
这篇文章将为大家详细讲解有关纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
为连江等地区用户提供了全套网页设计制作服务,及连江网站建设行业解决方案。主营业务为网站制作、成都做网站、连江网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!效果
思路
用css的animation属性做动画
代码
wxml:
请选择商品 点击弹出提示
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顶部提示弹框动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章名称:纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果-创新互联
标题URL:http://scyanting.com/article/cogpgh.html