时间戳

首页 > 解决方案 > 删除 HTML 中的类未捕获正确的 CSS 样式

css - 删除 HTML 中的类未捕获正确的 CSS 样式

问题描述

使用 Bootstrap 作为我的默认 CSS，我还创建了一个自定义 .css 文件，该文件在我的网页处理信息时创建一个加载屏幕。基本上，我的加载屏幕隐藏在后台，我使用 javascript 将其置于最前面以进行任何触发器。

这是CSS代码：

#loading-page.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loading-page.loading #loading-page-icon {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  z-index: 1001;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loading-page.loading #loading-page-icon:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loading-page.loading #loading-page-icon:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

#loading-page.loading .loading-curtain {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #5c5c5c;
  z-index: 1000;
}

#loading-page.loading .loading-curtain.section-left {
  left: 0;
}

#loading-page.loading .loading-curtain.section-right {
  right: 0;
}


/* Once the page loads */

#loading-page:not(.loading) {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%) -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

#loading-page:not(.loading) #loading-page-icon {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#loading-page:not(.loading) .loading-curtain.section-left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#loading-page:not(.loading) .loading-curtain.section-right {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

这是我的 HTML

<body>
    <div id="loading-page">
      <div id="loading-page-icon"></div>
      <div class="loading-curtain section-left"></div>
      <div class="loading-curtain section-right"></div>
    </div>

   ...[other html code]
</body>

然后这是我用来删除 div#loading-page 上的类的 Javascript

$(document).ready(function() {
    /*
        When a page fully loads, remove the .loading class

    */

    $('#loading-page')
        .removeClass('loading')
})

$(document).on(
    "submit", 
    [
        'form.search',
    ], 
    function() {
        /*
            Event Listener- anytime the search form is submitted, display the 
            loading screen.

        */

            $('#loading-page')
                .addClass('loading')
})

我的 CSS 代码的唯一问题是由于某种原因，我的过渡动画将不起作用（您在 .css 中看到“一旦页面加载”注释） - 就好像我在 #loading-page 上执行了 .hide()而不是删除类。我很确定 CSS 被忽略了。我什至试图通过尝试使用 :not('loading') 运算符来强制样式。除了动画不起作用之外，加载屏幕确实会弹出，然后在文档按预期准备好后消失。为什么我的 CSS 被忽略有什么帮助吗？

谢谢

标签： css

解决方案

添加和删​​除.loading会切换visibility属性 - 无法转换。有些东西要么隐藏，要么不隐藏。如果要淡入元素，请使用opacity，并且可能pointer-events这样不可见但仍然存在的元素不会捕获单击事件。

推荐阅读