自己写了个uniapp 打开红包效果，红包抖动打开，切换两个红包的显示状态

<view class="ac-banner">
				<image class="banner-pic" src="../../static/images/huodong/topbg.png" mode="widthFix"></image>
				<view class="ac-banner-main">
					<view class="ac-pocket " :class="aniShow?'tada':'no'" v-if="!pocketShow">
						<image src="../../static/images/huodong/gift2.png" mode="widthFix"></image>
					</view>
					<view class="ac-pocket tada"  v-else>
						<view class="ac-abs">
							<view class="ac-text">- 获得微信红包 -</view>
							<view class="ac-val"><text>¥</text>0.57</view>
						</view>
						<image src="../../static/images/huodong/gift.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="ac-open" @click="open()">
					<image src="../../static/images/huodong/button.png" mode=""></image>
				</view>
			</view>

export default {
		data() {
			return {
				aniShow:false,
				pocketShow:false,
			}
		},
		onLoad() {
		
		},
		methods: {
			open(){
				this.aniShow = true
				setTimeout(() => {
					this.pocketShow = true
				}, 2000);
			},
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}

.ac-banner{
		overflow: hidden;
		position: relative;
		margin-bottom: 80rpx;
		.banner-pic{
			width: 750rpx;
		}
		.ac-banner-main{
			position: absolute;
			top: 370rpx;
			left:0;
			width: 100%;
			z-index: 99;
		}
	}
	.ac-pocket {
		position: relative;
		font-size: 0;
		image{
			width: 750rpx;
		}
		.ac-abs{
			text-align: center;
			position: absolute;
			width: 100%;
			z-index: 99;
			box-sizing: border-box;
			padding-left: 40rpx;
			padding-top: 40rpx;
			line-height: 1;
			.ac-text{
				color: #fc9e61;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
			.ac-val{
				color: #e91c2a;
				font-size: 48rpx;
				font-weight: bold;
				text{
					font-size: 24rpx;
				}
			}
		}
	}
	.ac-open{
		position:absolute;
		left: 0;
		bottom: 40rpx;
		z-index: 99;
		width: 100%;
		font-size: 0;
		text-align: center;
		image{
			width: 420rpx;
			height: 120rpx;
		}
	}
	
	.text-o{
		color: #f57418!important;
	}

/* 12.7 */
	@-webkit-keyframes tada {
		0% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1)
		}
	
		10%,20% {
			-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
			transform: scale3d(.9,.9,.9) rotate(-3deg)
		}
	
		30%,50%,70%,90% {
			-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
			transform: scale3d(1.1,1.1,1.1) rotate(3deg)
		}
	
		40%,60%,80% {
			-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
			transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
		}
	
		to {
			-webkit-transform: scaleX(1);
			transform: scaleX(1)
		}
	}
	
	@keyframes tada {
		0% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1)
		}
	
		10%,20% {
			-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
			transform: scale3d(.9,.9,.9) rotate(-3deg)
		}
	
		30%,50%,70%,90% {
			-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
			transform: scale3d(1.1,1.1,1.1) rotate(3deg)
		}
	
		40%,60%,80% {
			-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
			transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
		}
	
		to {
			-webkit-transform: scaleX(1);
			transform: scaleX(1)
		}
	}
	.tada {
		animation-name: tada;
		animation-duration: 1.8s;
		animation-fill-mode: both
	}
	
	.animated {
	}