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

这篇文章将为大家详细讲解有关纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果

思路

用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顶部提示弹框动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。