短视频商城系统，首屏加载loading动画界面和路由跳转动画

1、首屏加载等待界面

（1）在public的index.html里面的id为app的div标签里面添加

<br><body><br>    <noscript><br>      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong><br>    </noscript><br>    <div id="app"><br>      <div id="loader-wrapper"><br>        <div id="loader"></div><br>        <div class="loader-section section-left"></div><br>        <div class="loader-section section-right"></div><br>        <div class="load_title">正在加载 nx-admin,请耐心等待<br>          <br><br>          <span>V1.3</span><br>        </div><br>      </div><br>    </div><br>    <br>  </body>

（2）继续添加style

<br><style><br>      html,<br>      body,<br>      #app {<br>        height: 100%;<br>        margin: 0px;<br>        padding: 0px;<br>      }<br>      .chromeframe {<br>        margin: 0.2em 0;<br>        background: #ccc;<br>        color: #000;<br>        padding: 0.2em 0;<br>      }<br>  <br>      #loader-wrapper {<br>        position: fixed;<br>        top: 0;<br>        left: 0;<br>        width: 100%;<br>        height: 100%;<br>        z-index: 999999;<br>      }<br>  <br>      #loader {<br>        display: block;<br>        position: relative;<br>        left: 50%;<br>        top: 50%;<br>        width: 150px;<br>        height: 150px;<br>        margin: -75px 0 0 -75px;<br>        border-radius: 50%;<br>        border: 3px solid transparent;<br>        /* COLOR 1 */<br>        border-top-color: #FFF;<br>        -webkit-animation: spin 2s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -ms-animation: spin 2s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -moz-animation: spin 2s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -o-animation: spin 2s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        animation: spin 2s linear infinite;<br>        /* Chrome, Firefox 16+, IE 10+, Opera */<br>        z-index: 1001;<br>      }<br>  <br>      #loader:before {<br>        content: "";<br>        position: absolute;<br>        top: 5px;<br>        left: 5px;<br>        right: 5px;<br>        bottom: 5px;<br>        border-radius: 50%;<br>        border: 3px solid transparent;<br>        /* COLOR 2 */<br>        border-top-color: #FFF;<br>        -webkit-animation: spin 3s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -moz-animation: spin 3s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -o-animation: spin 3s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -ms-animation: spin 3s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        animation: spin 3s linear infinite;<br>        /* Chrome, Firefox 16+, IE 10+, Opera */<br>      }<br>  <br>      #loader:after {<br>        content: "";<br>        position: absolute;<br>        top: 15px;<br>        left: 15px;<br>        right: 15px;<br>        bottom: 15px;<br>        border-radius: 50%;<br>        border: 3px solid transparent;<br>        border-top-color: #FFF;<br>        /* COLOR 3 */<br>        -moz-animation: spin 1.5s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -o-animation: spin 1.5s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -ms-animation: spin 1.5s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        -webkit-animation: spin 1.5s linear infinite;<br>        /* Chrome, Opera 15+, Safari 5+ */<br>        animation: spin 1.5s linear infinite;<br>        /* Chrome, Firefox 16+, IE 10+, Opera */<br>      }<br>  <br>  <br>      @-webkit-keyframes spin {<br>        0% {<br>          -webkit-transform: rotate(0deg);<br>          /* Chrome, Opera 15+, Safari 3.1+ */<br>          -ms-transform: rotate(0deg);<br>          /* IE 9 */<br>          transform: rotate(0deg);<br>          /* Firefox 16+, IE 10+, Opera */<br>        }<br>        100% {<br>          -webkit-transform: rotate(360deg);<br>          /* Chrome, Opera 15+, Safari 3.1+ */<br>          -ms-transform: rotate(360deg);<br>          /* IE 9 */<br>          transform: rotate(360deg);<br>          /* Firefox 16+, IE 10+, Opera */<br>        }<br>      }<br>  <br>      @keyframes spin {<br>        0% {<br>          -webkit-transform: rotate(0deg);<br>          /* Chrome, Opera 15+, Safari 3.1+ */<br>          -ms-transform: rotate(0deg);<br>          /* IE 9 */<br>          transform: rotate(0deg);<br>          /* Firefox 16+, IE 10+, Opera */<br>        }<br>        100% {<br>          -webkit-transform: rotate(360deg);<br>          /* Chrome, Opera 15+, Safari 3.1+ */<br>          -ms-transform: rotate(360deg);<br>          /* IE 9 */<br>          transform: rotate(360deg);<br>          /* Firefox 16+, IE 10+, Opera */<br>        }<br>      }<br>  <br>  <br>      #loader-wrapper .loader-section {<br>        position: fixed;<br>        top: 0;<br>        width: 51%;<br>        height: 100%;<br>        background: #7171C6;<br>        /* Old browsers */<br>        z-index: 1000;<br>        -webkit-transform: translateX(0);<br>        /* Chrome, Opera 15+, Safari 3.1+ */<br>        -ms-transform: translateX(0);<br>        /* IE 9 */<br>        transform: translateX(0);<br>        /* Firefox 16+, IE 10+, Opera */<br>      }<br>  <br>      #loader-wrapper .loader-section.section-left {<br>        left: 0;<br>      }<br>  <br>      #loader-wrapper .loader-section.section-right {<br>        right: 0;<br>      }<br>  <br>      /* Loaded */<br>  <br>      .loaded #loader-wrapper .loader-section.section-left {<br>        -webkit-transform: translateX(-100%);<br>        /* Chrome, Opera 15+, Safari 3.1+ */<br>        -ms-transform: translateX(-100%);<br>        /* IE 9 */<br>        transform: translateX(-100%);<br>        /* Firefox 16+, IE 10+, Opera */<br>        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br>        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br>      }<br>  <br>      .loaded #loader-wrapper .loader-section.section-right {<br>        -webkit-transform: translateX(100%);<br>        /* Chrome, Opera 15+, Safari 3.1+ */<br>        -ms-transform: translateX(100%);<br>        /* IE 9 */<br>        transform: translateX(100%);<br>        /* Firefox 16+, IE 10+, Opera */<br>        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br>        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br>      }<br>  <br>      .loaded #loader {<br>        opacity: 0;<br>        -webkit-transition: all 0.3s ease-out;<br>        transition: all 0.3s ease-out;<br>      }<br>  <br>      .loaded #loader-wrapper {<br>        visibility: hidden;<br>        -webkit-transform: translateY(-100%);<br>        /* Chrome, Opera 15+, Safari 3.1+ */<br>        -ms-transform: translateY(-100%);<br>        /* IE 9 */<br>        transform: translateY(-100%);<br>        /* Firefox 16+, IE 10+, Opera */<br>        -webkit-transition: all 0.3s 1s ease-out;<br>        transition: all 0.3s 1s ease-out;<br>      }<br>  <br>      /* JavaScript Turned Off */<br>  <br>      .no-js #loader-wrapper {<br>        display: none;<br>      }<br>  <br>      .no-js h1 {<br>        color: #222222;<br>      }<br>  <br>      #loader-wrapper .load_title {<br>        font-family: 'Open Sans';<br>        color: #FFF;<br>        font-size: 19px;<br>        width: 100%;<br>        text-align: center;<br>        z-index: 9999999999999;<br>        position: absolute;<br>        top: 60%;<br>        opacity: 1;<br>        line-height: 30px;<br>      }<br>  <br>      #loader-wrapper .load_title span {<br>        font-weight: normal;<br>        font-style: italic;<br>        font-size: 13px;<br>        color: #FFF;<br>        opacity: 0.5;<br>      }<br>    </style>

2、vue路由跳转动画

（1）在App.vue里面添加

1	`<br><transition name="fade"><br> <router-view /><br></transition>`

(2) 在App.vue的style里面添加

<br>#app{<br>    .fade-enter-active,<br>  .fade-leave-avtive {<br>    transition: opacity 1s;<br>  }<br>  .fade-enter,<br>  .fade-leave-to {<br>    opacity: 0;<br>  }<br>}

以上就是短视频商城系统，首屏加载loading动画界面和路由跳转动画，更多内容欢迎关注之后的文章