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

发布时间：2022-12-29 13:45:11 来源：互联网

.

杜鹃啼血染花红，山后山前一画中。旅行的意义不在于浏览风景，而是到一个完全陌生的环境，放空自己，感受享受孤独!

效果

思路

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

以上就是纯CSS如何实现微信小程序仿QQ顶部提示弹框动画效果。你相信神吗？我信，我就是神！更多关于纯CSS如何实现微信小程序仿QQ顶部提示弹框动画效果请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章:

标签： 小程序如何实现