小技巧分享

[bosens-China]

loading

为了避免白屏时间过长，通过会给一个动画来提示用户正在加载，下面就是简单说下在Vue加载之前如何实现动画效果

原理

在初始化Vue的时候我们需要提供一个节点或者节点名称，作为根元素来使用，但是这个根元素在new Vue执行的时候内容会被销毁，不信来测试一个例子

<div id="app">
  hello wrold
</div>

// 省略
new Vue({
  el: "#app"
});

可以复制一下上面代码，当上面代码执行的时候，#app下的内容会被清空，根据这个思路就很容易实现我们想要的效果了

实现简单一版

<div id="app">正在加载中<dot>...</dot></div>

dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -0.25em;
  overflow: hidden;
}
dot::before {
  display: block;
  content: "...\A..\A.";
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% {
    transform: translateY(-2em);
  }
  66% {
    transform: translateY(-1em);
  }
}

这样就实现了一个简单的动画效果了