Question

我有一个非常简单的CSS生成的加载动画，该动画在托管服务器上根本不起作用，但在本地构建中效果很好。我遵循了有关您的电子管的教程，并使用了香草JS。加载程序具有动画效果，并使用简单的CSS创建。该代码也可以在本地用于移动设备，但是奇怪的是导航菜单之一不会立即出现，而是在加载所有内容一分钟后才突然出现。这是托管的网站。

JS

const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
const vid = document.getElementById("catwalk");
const show = document.getElementById('show');
const about = document.getElementById('about');
const researchFilm = document.getElementById('researchFilm');
const stills = document.getElementById('stills');
const researchFilmBa = document.getElementById('researchFilm-ba');
const stillsBa = document.getElementById('stills-ba');
const lookbook = document.getElementById('lookbook');
const inactiveTabs = document.querySelectorAll(".nav-bar > a:not(.active)")
const collectionLinks = document.querySelectorAll(".info a")
const colorElements = document.querySelectorAll('.black-text');
const faders = document.querySelectorAll('.fade-in');
const mobileTabs = document.querySelectorAll('.mobile__tab');
const mobileLinks = document.querySelectorAll('.mobile__header-controls a');
const morebtn = document.querySelector('.mobile__more');
const processMenu = document.querySelector('.mobile__process-nav');
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('load', () => {
   const loader = document.querySelector('.loading-wrapper')
   loader.classList.add('preload-finish');
   setTimeout(()=>{
      loader.style.display = "none";
   },500);
})

CSS

.loading-wrapper {
   width: 100%;
   height: 100%;
   background-color: var(--grCol3);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
   transition: opacity 0.25s ease-out;
}

.loading {
   width: 15px;
   height: 15px;
   border: 6px solid rgb(255, 255, 255);
   -webkit-animation: 1s loading ease-out infinite;
   animation: 1s loading ease-out infinite;
}

.preload-finish {
   opacity: 0;
   pointer-events: none;

}

@-webkit-keyframes loading {
   0% {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
   }

   100% {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
   }
}

@keyframes loading {
   0% {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
   }

   100% {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
   }
}

HTML

<body class="col">
   <div class="loading-wrapper">
      <div class="loading">
      </div>
   </div>
   <div class="control">
      <div id="pause">
   <nav class="nav-container">
      <div class="nav-bar">
         <a href="#show" data-tab-target="#show" class="tab">Show</a>
         <a href="#about" data-tab-target="#about" class="tab">About</a>
         <a href="#researchFilm" data-tab-target="#researchFilm" class="tab">Research Film</a>
         <a href="#stills" data-tab-target="#stills" class="tab">Stills</a>
         <a href="#lookbook" data-tab-target="#lookbook" class="tab">Lookbook</a>
      </div>
<section>
main content
</section>
<script src="js/collections"></script>
</body>

加载动画适用于本地主机，但不适用于Web服务器

0 个答案: