From 4c89ea7474f4315870df1790f99f3e431f343b90 Mon Sep 17 00:00:00 2001 From: Vben <anncwb@126.com> Date: 星期五, 18 六月 2021 00:39:33 +0800 Subject: [PATCH] fix(menu): fix the jitter problem of menu folding animation,fix #732 --- index.html | 183 +++++++++++++++++++++++++++++++++------------ 1 files changed, 133 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 84ba684..5b99faf 100644 --- a/index.html +++ b/index.html @@ -1,82 +1,165 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="en" id="htmlRoot"> <head> <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta name="renderer" content="webkit" /> + <meta + name="viewport" + content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" + /> + + <title><%= title %></title> <link rel="icon" href="/favicon.ico" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vue Vben admin 2.0</title> </head> <body> + <script> + (() => { + var htmlRoot = document.getElementById('htmlRoot'); + var theme = window.localStorage.getItem('__APP__DARK__MODE__'); + if (htmlRoot && theme) { + htmlRoot.setAttribute('data-theme', theme); + theme = htmlRoot = null; + } + })(); + </script> <div id="app"> <style> - @keyframes load { - 0% { - -webkit-transform: rotate(-360deg); - -moz-transform: rotate(-360deg); - -ms-transform: rotate(-360deg); - -o-transform: rotate(-360deg); - transform: rotate(-360deg); - } - - 100% { - -webkit-transform: rotate(0); - -moz-transform: rotate(0); - -ms-transform: rotate(0); - -o-transform: rotate(0); - transform: rotate(0); - } + html[data-theme='dark'] .app-loading { + background-color: #2c344a; } - .g-loading { - -webkit-animation: load 2s linear infinite; - -moz-animation: load 2s linear infinite; - -ms-animation: load 2s linear infinite; - -o-animation: load 2s linear infinite; - animation: load 2s linear infinite; - -webkit-transform-origin: center center; - -moz-transform-origin: center center; - -ms-transform-origin: center center; - -o-transform-origin: center center; - transform-origin: center center; + html[data-theme='dark'] .app-loading .app-loading-title { + color: rgba(255, 255, 255, 0.85); } .app-loading { + display: flex; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0, 3); + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #f4f7f9; } .app-loading .app-loading-wrap { position: absolute; - top: 45%; + top: 50%; left: 50%; - width: 64px; - -ms-transform: translate3d(-50%, -50%, 0); - -moz-transform: translate3d(-50%, -50%, 0); + display: flex; -webkit-transform: translate3d(-50%, -50%, 0); - -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); + justify-content: center; + align-items: center; + flex-direction: column; } - .app-loading .app-loading-wrap img.logo { - margin-bottom: 20px; - margin-left: -20px; + .app-loading .dots { + display: flex; + padding: 98px; + justify-content: center; + align-items: center; } - .app-loading .app-loading-wrap .app-loading__tip { + .app-loading .app-loading-title { + display: flex; + margin-top: 30px; + font-size: 30px; + color: rgba(0, 0, 0, 0.85); + justify-content: center; + align-items: center; + } + + .app-loading .app-loading-logo { display: block; - margin-top: 4px; - font-size: 13px; - color: #303133; - text-align: center; + width: 90px; + margin: 0 auto; + margin-bottom: 20px; + } + + .dot { + position: relative; + display: inline-block; + width: 48px; + height: 48px; + margin-top: 30px; + font-size: 32px; + transform: rotate(45deg); + box-sizing: border-box; + animation: antRotate 1.2s infinite linear; + } + + .dot i { + position: absolute; + display: block; + width: 20px; + height: 20px; + background-color: #0065cc; + border-radius: 100%; + opacity: 0.3; + transform: scale(0.75); + animation: antSpinMove 1s infinite linear alternate; + transform-origin: 50% 50%; + } + + .dot i:nth-child(1) { + top: 0; + left: 0; + } + + .dot i:nth-child(2) { + top: 0; + right: 0; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; + } + + .dot i:nth-child(3) { + right: 0; + bottom: 0; + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; + } + + .dot i:nth-child(4) { + bottom: 0; + left: 0; + -webkit-animation-delay: 1.2s; + animation-delay: 1.2s; + } + @keyframes antRotate { + to { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } + } + @-webkit-keyframes antRotate { + to { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } + } + @keyframes antSpinMove { + to { + opacity: 1; + } + } + @-webkit-keyframes antSpinMove { + to { + opacity: 1; + } } </style> - <section class="app-loading"> - <section class="app-loading-wrap"> - <img src="./resource/img/logo.png" class="logo" alt="Logo" /> - <img src="./resource/img/loading.svg" alt="" class="g-loading" /> - </section> - </section> + <div class="app-loading"> + <div class="app-loading-wrap"> + <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> + <div class="app-loading-dots"> + <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span> + </div> + <div class="app-loading-title"><%= title %></div> + </div> + </div> </div> <script type="module" src="/src/main.ts"></script> </body> -- Gitblit v1.8.0