短視訊商城系統，首屏載入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載入動畫庫動畫
- 短視訊系統，Android 使用MotionLayout實現動畫效果Android動畫
- vue實現首屏載入等待動畫 避免首次載入白屏尷尬Vue動畫
- Blend學習之Loading載入動畫動畫
- 仿 Uber 視訊背景登入介面以及登入動畫動畫
- 鹹魚新特性介面-視訊動畫動畫
- 短視訊app開發，點選跳轉到另一個頁面時的過場動畫APP動畫
- 直播商城系統APP帶貨系統短視訊帶貨系統APP
- 直播app系統原始碼，圖片Loading旋轉動畫效果APP原始碼動畫
- 超酷的 CSS3 loading 預載入動畫特效CSSS3動畫特效
- 短視訊SEO霸屏系統原始碼，抖音獲客系統軟體，短視訊賬號矩陣系統。原始碼矩陣
- 系統學習iOS動畫之一：檢視動畫iOS動畫
- Activity過渡（跳轉）動畫動畫
- 最簡單的Flutter路由教程——跳轉、動畫與傳參Flutter路由動畫
- 短視訊系統，實現介面陰影效果
- 5個可愛的CSS3 Loading載入動畫CSSS3動畫
- 直播商城系統：帶貨APP+短視訊+直播+商城+多商戶appAPP
- 系統學習iOS動畫之四：檢視控制器的轉場動畫iOS動畫
- 視差動畫 雅虎新聞摘要載入動畫
- 短視訊商城原始碼，首頁輪播圖佈局管理原始碼
- 直播平臺搭建，自定義View實現loading動畫載入View動畫
- 短視訊商城系統，Android TextView自動調整字型大小AndroidTextView
- 短視訊開發，製作上下動態的箭頭動畫動畫
- 萬彩動畫大師教程 | 如何分享動畫視訊？動畫
- 短影片商城系統，session和cookie實現登入SessionCookie
- 屬性動畫 58同城資料載入動畫動畫
- 短視訊直播系統開發直播短視訊程式搭建短視訊互動直播
- bilibili動畫下載視訊批量改名（python）動畫Python
- 使用CSS3實現超炫的Loading（載入）動畫效果CSSS3動畫
- app直播原始碼，等待時的載入動畫（交錯載入動畫）APP原始碼動畫
- 短視訊商城系統，px如何轉換rem，且可等比例縮放頁面REM
- 直播短視訊原始碼短視訊APP短視訊帶貨系統多商戶直播原始碼APP
- 短視訊商城在ios短視訊開發上的應用效果iOS
- 環形動畫載入檢視AnimatedCircleLoadingView動畫View
- 使用Lottie做載入動畫動畫
- 最常用的動畫系統——補間動畫動畫
- 小紅書短視訊seo引流系統