快捷導(dǎo)航

vue實(shí)現(xiàn)頁面刷新動畫

更新時間：2022年04月10日 08:01:59 作者：-=｜=-

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面刷新動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)頁面刷新動畫的具體代碼，供大家參考，具體內(nèi)容如下

做一個vue的頁面刷新動畫，找了好多動畫樣式，感謝大佬們造的輪子。

主要就是在index.html文件里面寫一個動畫樣式，在頁面刷新的時候讓他去前面做動畫，等我們的樣式可以加載的時候去把這個動畫樣式給移除掉就可以了，而判斷我們的樣式是否加載好可以用created生命周期去判斷，因?yàn)檫@個生命周期是在瀏覽器解析完html的各種樣式后觸發(fā)的，所以可以在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>

這就是所有的頁面刷新動畫的代碼了