介绍 & lt; view 类=癱ontainer"比;
& lt;才能view 类=& # 39;anit {{show ==, 1 ?“show": (show ==, 2 ?“hide":““)}} & # 39;祝辞请选择商品& lt;/view>
& lt;才能view bindtap=& # 39; anniu& # 39;在点击弹出提示& lt;/view>
& lt;/view> .container {
,,身高:100%;
,,显示:flex;
,,flex-direction:列;
,,对齐项目:中心;
,,justify-content:之间的空间;
,,填充:200 rpx 0;
,,box-sizing: border-box;
},
.anit {
,,宽度:100%;
,,身高:70 rpx;
背景:才能,红色;
位置:才能,绝对;
,,颜色:白色;
,,字体大小:30 rpx;
,,行高:70 rpx;
,,:-70 rpx;
,,text-align:中心;
}
,告诉{
,,:0 rpx;
动画:才能,show 0.2年代;
animation-timing-function才能:缓解;
}
@keyframes 显示
{
得到{:-70 rpx;}
用{:0 rpx;}
}
hide {
,,:-70 rpx;
动画:才能,hide 0.2年代;
animation-timing-function才能:缓解;
}
@keyframes 隐藏
{
得到{:0 rpx;}
用{:-70 rpx;}
} 页面({
,,数据:{
,,,显示:0
,,},
onLoad才能:function (), {
,,},
anniu才能:函数(e) {
,,,let that =,;
,,,this.setData ({
,,,,,表明:1
,,,})
,,,setTimeout (function (), {
,,,,,that.setData ({
,,,,,,,表明:2
,,,,,})
,,,},,2000)
,,}
})
这篇文章将为大家详细讲解有关纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
效果
<强>思路
用CSS的动画属性做动画
代码
wxml:
wxs:
,
js:
关于“纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
