短視訊商城系統，首屏載入loading動畫介面和路由跳轉動畫
短視訊商城系統，首屏載入loading動畫介面和路由跳轉動畫
1、首屏載入等待介面
（1）在public的index.html裡面的id為app的div標籤裡面新增
<body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在載入 nx-admin,請耐心等待 <br> <span>V1.3</span> </div> </div> </div> </body>
（2）繼續新增style
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 1 */
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 2 */
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
/* COLOR 3 */
-moz-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-webkit-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
/* Old browsers */
z-index: 1000;
-webkit-transform: translateX(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(0);
/* IE 9 */
transform: translateX(0);
/* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%);
/* IE 9 */
transform: translateX(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%);
/* IE 9 */
transform: translateX(100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%);
/* IE 9 */
transform: translateY(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
2、vue路由跳轉動畫
（1）在App.vue裡面新增
<transition name="fade"> <router-view /> </transition>
(2) 在App.vue的style裡面新增
#app{
.fade-enter-active,
.fade-leave-avtive {
transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
}
以上就是短視訊商城系統，首屏載入loading動畫介面和路由跳轉動畫， 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2899185/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- WPF loading載入動畫庫動畫
- 短視訊商城系統，自動更改每次下拉後的重新整理動畫動畫
- Blend學習之Loading載入動畫動畫
- 短視訊系統，Android 使用MotionLayout實現動畫效果Android動畫
- 直播app系統原始碼，圖片Loading旋轉動畫效果APP原始碼動畫
- vue實現首屏載入等待動畫 避免首次載入白屏尷尬Vue動畫
- 短視訊app開發，視訊、直播畫面跟隨手機橫屏、豎屏移動APP
- 超酷的 CSS3 loading 預載入動畫特效CSSS3動畫特效
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- 系統學習iOS動畫之一：檢視動畫iOS動畫
- 系統學習iOS動畫之四：檢視控制器的轉場動畫iOS動畫
- 直播平臺搭建，自定義View實現loading動畫載入View動畫
- 短視訊app開發，點選跳轉到另一個頁面時的過場動畫APP動畫
- 最簡單的Flutter路由教程——跳轉、動畫與傳參Flutter路由動畫
- 環形動畫載入檢視AnimatedCircleLoadingView動畫View
- 短視訊商城系統，Android TextView自動調整字型大小AndroidTextView
- 短視訊直播系統，QLinearGradient之畫漸變線
- 純css製作loading動畫CSS動畫
- 短視訊開發，製作上下動態的箭頭動畫動畫
- bilibili動畫下載視訊批量改名（python）動畫Python
- app直播原始碼，等待時的載入動畫（交錯載入動畫）APP原始碼動畫
- 萬彩動畫大師教程 | 如何分享動畫視訊？動畫
- 短視訊直播系統開發直播短視訊程式搭建短視訊互動直播
- 【動畫消消樂｜CSS】086.炫酷水波浪Loading過渡動畫動畫CSS
- 【動畫消消樂 】仿ios、android中常見的一個loading動畫 074動畫iOSAndroid
- 使用Lottie做載入動畫動畫
- 好看的Dialog載入動畫動畫
- 巧用 CSS 實現動態線條 Loading 動畫CSS動畫
- 【動畫消消樂】HTML+CSS 自定義載入動畫 065動畫HTMLCSS
- 【動畫消消樂】HTML+CSS 自定義載入動畫 062動畫HTMLCSS
- 【動畫消消樂】HTML+CSS 自定義載入動畫 061動畫HTMLCSS
- Android 動畫詳解：屬性動畫、View 動畫和幀動畫Android動畫View
- 短視訊商城系統，手機獲取到驗證碼後自動填入
- 給你的Flutter頁面跳轉加上動畫Flutter動畫
- 系統學習iOS動畫之三：圖層動畫iOS動畫
- android短視訊開發，點選靜態圖片自動跳轉播放視訊Android
- 模擬滑屏動畫動畫
- 【動畫消消樂】HTML+CSS 自定義載入動畫：怦然心跳 066動畫HTMLCSS