脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue页面刷新动画

vue实现页面刷新动画

 更新时间：2022年04月10日 08:01:59   作者：-=｜=-  
这篇文章主要为大家详细介绍了vue实现页面刷新动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现页面刷新动画的具体代码，供大家参考，具体内容如下

做一个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>

这就是所有的页面刷新动画的代码了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue 利用指令实现禁止反复发送请求的两种方法

    Vue 利用指令实现禁止反复发送请求的两种方法

    这篇文章主要介绍了Vue 利用指令实现禁止反复发送请求的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 详解vue中引入stylus及报错解决方法

    详解vue中引入stylus及报错解决方法

    这篇文章主要介绍了详解vue中引入stylus及报错解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vueCl如何查看打包后文件的大小占比

    vueCl如何查看打包后文件的大小占比

    这篇文章主要介绍了vueCl如何 查看打包后文件的大小占比问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue2利用echarts绘制折线图,饼图和大图

    Vue2利用echarts绘制折线图,饼图和大图

    这篇文章主要为大家详细介绍了Vue2如何利用echarts绘制折线图,饼图和大图，文中的示例代码简洁易懂，具有一定的借鉴价值，需要的可以参考一下
    2023-04-04
  • vue中echarts自动轮播tooltip问题

    vue中echarts自动轮播tooltip问题

    这篇文章主要介绍了vue中echarts自动轮播tooltip问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue 搭建Vuex环境详解

    Vue 搭建Vuex环境详解

    这篇文章主要为大家介绍了Vue搭建Vuex环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue + ts实现轮播插件的示例

    Vue + ts实现轮播插件的示例

    这篇文章主要介绍了Vue + ts实现轮播插件的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-11-11
  • laravel-admin 与 vue 结合使用实例代码详解

    laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，这篇文章主要介绍了laravel-admin 与 vue 结合使用,需要的朋友可以参考下
    2019-06-06
  • vue-cli是什么及创建vue-cli项目的方法

    vue-cli是什么及创建vue-cli项目的方法

    vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧
    2023-04-04
  • Vue引入highCharts实现数据可视化

    Vue引入highCharts实现数据可视化

    这篇文章主要为大家详细介绍了Vue引入highCharts实现数据可视化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论