vue页面刷新动画

最新推荐文章于 2024-08-24 17:31:28 发布

-=｜=-

最新推荐文章于 2024-08-24 17:31:28 发布

阅读量1.9k

点赞数

文章标签： html vue css3

本文链接：https://blog.csdn.net/l17606145618/article/details/106528027

版权

做一个vue的页面刷新动画，找了好多动画样式，感谢大佬们造的轮子。。。

主要就是在index.html文件里面写一个动画样式，在页面刷新的时候让他去前面做动画，等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了，而判断我们的样式是否加载好可以用created生命周期去判断，因为这个生命周期是在浏览器解析完html的各种样式后触发的，所以可以在app.vue的created生命周期里面把动画样式移除

接下来是代码

index.html里面的代码在这里插入图片描述

css样式：

<style type="text/css" scoped="scoped">
		html,body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			background: cornflowerblue;
		}
		
		.loadings{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.spinner {
			width: 300px;
			height: 50px;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.spinner > div {
		  width: 30px;
		  height: 30px;
		  background-color: #67CF22;
		 
		  border-radius: 100%;
		  margin: 0px 10px;
		  display: inline-block;
		  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
		  animation: bouncedelay 1.4s infinite ease-in-out;
		  /* Prevent first frame from flickering when animation starts */
		  -webkit-animation-fill-mode: both;
		  animation-fill-mode: both;
		}
		 
		.spinner .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		 
		.spinner .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
		 
		@-webkit-keyframes bouncedelay {
		  0%, 80%, 100% { -webkit-transform: scale(0.0) }
		  40% { -webkit-transform: scale(1.0) }
		}
		 
		@keyframes bouncedelay {
		  0%, 80%, 100% {
		    transform: scale(0.0);
		    -webkit-transform: scale(0.0);
		  } 40% {
		    transform: scale(1.0);
		    -webkit-transform: scale(1.0);
		  }
		}
		
		#app{
			display: none;
		}
	</style>

html代码

<body>
		<div class="loadings">
			<div class="spinner">
			  <div class="bounce1"></div>
			  <div class="bounce2"></div>
			  <div class="bounce3"></div>
			</div>
		</div>
		<div id="app"></div>
	</body>

下面是app.vue的代码

<script>
	export default {
		name: 'App',
		data() {
			return {
			
			}
		},
		created() {
		//判断有没有动画的盒子在，在的话移除掉
			let loading = document.getElementsByClassName('loadings')[0]
			if(loading){
				document.body.removeChild(loading)
			}
		}
	}
</script>

<style lang="less">
	body{
		background: white;//这里是把动画影响的背景颜色改回来
	}
	#app{
		width: 100%;
		height: 100%;
		display: block;
		//这里是把隐藏的app盒子展示出来
	}
</style>