影响
思维
动画与CSS的动画属性
码
wxml：
<view class="container">
<view class='anit {{show = 1? "Show": (show = 2? "Hide":")}'> Please select commodity </view>.
< view bindtap ='anniu'> click the pop-up prompt </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程序，由
南京小程序开发安优网络介绍给你实现微信applet模仿QQ顶级提示卡通效果。我希望它对你有所帮助。如果您有任何疑问，请给我留言，小编会及时回复您。非常感谢您对我们的支持。
本文地址：
http://www.njanyou.cn/web/2597.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
将客户反馈转化为可操作的设计
下一篇：
如何为您的企业打造有意义的品牌标识
