vue项目首屏加载动画

首先在index.html中做动画，由于拿不到dom元素。需要手动去创建

let animateTimer;
    // 创建loading的盒子
    function loadingBox() {
      const html = document.documentElement
      const loadBox = document.createElement("div");
      loadBox.className = "first-loading"
      html.appendChild(loadBox);
    }

    // 创建介绍的盒子
    function introBox() {
      const loadBox = document.querySelector(".first-loading")
      const introBox = document.createElement("div");
      introBox.className = "load-introduce"
      introBox.innerText = "qq";
      loadBox.appendChild(introBox);
    }

    // 创建动画盒子
    function animateBox() {
      const loadBox = document.querySelector(".first-loading")
      const loadAnimate = document.createElement("div");
      loadAnimate.className = "load-animate";
      loadAnimate.innerText = "loading";
      const ul = document.createElement("ul");
      ul.className = "load-ul";
      [1, 2, 3].forEach(item => {
        const li = document.createElement("li");
        li.className = "load-li";
        ul.appendChild(li);
      })
      loadAnimate.appendChild(ul);
      loadBox.appendChild(loadAnimate);
    }

    // 改变introduce的内容
    function changeIntro() {
      const list = [
        "qq",
        "ww",
        "ee"
      ]
      let index = 0;
      animateTimer = setInterval(() => {
        console.log(12);
        if (index === 2) {
          index = 0;
        } else {
          index++;
        }
        const intro = document.querySelector(".load-introduce");
        if (intro) intro.innerText = list[index];
      }, 2000);
    }

    loadingBox();
    introBox();
    animateBox();
    changeIntro();

样式

 .first-loading {
      width: 100vw;
      height: 100vh;
      background: no-repeat url("");
      overflow: hidden;
      color: #FFF;
    }

    .load-introduce {
      margin: 200px auto;
      text-align: center;
      font-size: 50px;
      padding: 0 70px;
    }

    .load-animate {
      position: fixed;
      top: 65%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-style: italic;
      letter-spacing: 5px;
      display: flex;
      font-size: 25px;
      justify-content: center;
    }

    .load-ul {
      margin-top: 15px;
      list-style: none;
      display: flex;
      justify-content: center;
    }

    .load-li {
      margin-left: 10px;
      height: 15px;
      width: 15px;
      background-color: #FFF;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .load-li:nth-of-type(1) {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .load-li:nth-of-type(2) {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    .load-introduce::after {}

    @-webkit-keyframes introduce-show {
      0% {}
    }

    @-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.vue/App.tsx中确定删除dom以及移除定时器

    // 删除动画,定时器
    onMounted(() => {
      // @ts-ignore
      if (animateTimer) clearInterval(animateTimer);
      if (document.querySelector(".first-loading"))
        document.querySelector(".first-loading")!.remove();
    });

妥！