vue动画轻提示

---

  我习惯自己写组件，内存小，加载快。必要时我会引入插件，并剔除多余的文件，希望这个小功能可以帮到你一些。

  组件特征：
   （1）在触发某方法时弹出轻提示；
   （2）在1.7秒延迟后自动消失；
   （3）点击取消键可以立即消失；
   （4）再次单击再次弹出；
   （5）弹出消失都有动画效果。

子组件：

<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>

  到底了！原创不易，转载请注明出处。
  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，我常常把源码放在文章里，注释却并不很多，喜欢探索的人自会明白其中道理，自学也是人生的一门必修课。

  不辜负每一份真情，不嘲笑每一个正在努力的人，力所能及的对别人施以援手，每天都要强化自己，洗去铅华才能绽放光芒。

推荐阅读：

乐淘网侧边栏
自定义加载页
自定义模态框
JS模拟后台