纯CSS实现微信小程序仿QQ顶部提示弹框动画效果

微信(小程序)  /  管理员 发布于 5年前   240

效果

思路

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