效果
思路
用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顶部提示弹框动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！