vue动画轻提示

<template>
	<view class="app">
		<view class="box" :class="[Tips.light===exit?'pointOut':'']">
			<text>{{Tips.text}}</text>
			<img @click="cancel()" src="https://img-blog.csdnimg.cn/20210320142320188.png" alt="" class="box-icon">
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				exit:true			//是否隐藏轻提示
			}
		},
		methods:{
			cancel(){
				this.exit = false;
				setTimeout(()=>{
					this.exit = true;
				},1500)
			}
		},
		props:["Tips"]
	}
</script>
<style lang="less">
.app{
	.box{
		display:flex;
		justify-content:space-between;
		align-items:center;
		position:fixed;
		top:50rpx;
		left:0;right:0;
		margin:auto;
		z-index:20;
		width:88vw;
		height:0rpx;
		padding:0 30rpx;
		box-sizing:border-box;
		background-color:#fff;
		opacity:0;
		box-shadow: 0px 6px 16px 0px rgba(48, 48, 48, 0.2);
		border-bottom:4rpx #F54D4F solid;
		border-radius: 12rpx;
		font-size:36rpx;
		letter-spacing: 2rpx;
		.box-icon{
			width:30rpx;
			height:30rpx;
		}
	}
}
.pointOut{
	animation:visible .5s forwards,hidden .5s forwards 1.7s;
}
.hidd{
	animation:hidden .5s forwards;
}
@keyframes visible{
	from{height:0rpx;opacity:0;transform:translateY(0rpx);}
	to{height:100rpx;opacity:1;transform:translateY(90rpx);}
}
@keyframes hidden{
	from{height:100rpx;opacity:1;transform:translateY(90rpx);}
	to{height:0rpx;opacity:0;transform:translateY(0rpx);}
}
</style>

<template>
	<view>
		<lightTips :Tips="tips"></lightTips>
		<view @click="popup()">轻提示</view>
	</view>
</template>
<script>
import lightTips from './组件路径'
	export default{
		data(){
			return{
				tips:{text:'留言发送失败，请重新试试',light:false},//请提示
			}
		},
		methods:{
			popup(){
				if(!this.tips.light){
					this.tips.light = true;
					setTimeout(()=>{
						this.tips.light = false;
					},2200)
				}
			}
		},
		components:{lightTips}
	}
</script>
<style>
</style>