Question

我正在开展一个项目。我希望在4000毫秒后运行一些css属性。我想在禁用javascript时运行它（如果启用了js，它将删除该类。）。

我怎样才能做到这一点。可能吗？如果没有其他解决方案？

提前感谢您的帮助。

Answer 1

我在网上找不到任何答案。所以我最后3天尝试了这个，最后我得到了解决方案。这是解决方案：

$(window).load(function() {
	$(".loader").delay(3000).fadeOut(500, function() {
      $(".main-cont").hide();
	});
})

body {
    margin: 0px;
    padding: 0px;
    background-color: #4CAF50;
    color: #FFF;
    font-family: arial;
    font-size: 20px;

}
.main-cont {
    background-color: #3F51B5;
    width: 100vw;
    height: 100vh;
    display: inline-block;
    padding-top: calc(50vh - 20px);
    position: fixed;
    text-align: center;
    line-height: 20px;
    opacity: 0;
    -webkit-animation: css-delay 0ms infinite ease-in-out;
    -moz-animation: css-delay 0ms infinite ease-in-out;
    -ms-animation: css-delay 0ms infinite ease-in-out;
    -o-animation: css-delay 0ms infinite ease-in-out;
    -khtml-animation: css-delay 0ms infinite ease-in-out;
    animation: css-delay 0ms infinite ease-in-out;
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-iteration-count: 1;
    animation-delay :  10s; /* time for delay animation */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.cont {
    text-align: center;
    display: block;
    line-height: 20px;
    padding-top: calc(50vh - 20px);
}
@keyframes css-delay {
    0% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

/* this is only for loading animation */

.loader {
    height: 100vh;
	width: 100%;
	display: inline-block;
	/* display: none; */
	position: fixed;
	z-index: 0;
    background-color: #333;
}
.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loader">
    <div class="sk-circle">
      <div class="sk-circle1 sk-child"></div>
      <div class="sk-circle2 sk-child"></div>
      <div class="sk-circle3 sk-child"></div>
      <div class="sk-circle4 sk-child"></div>
      <div class="sk-circle5 sk-child"></div>
      <div class="sk-circle6 sk-child"></div>
      <div class="sk-circle7 sk-child"></div>
      <div class="sk-circle8 sk-child"></div>
      <div class="sk-circle9 sk-child"></div>
      <div class="sk-circle10 sk-child"></div>
      <div class="sk-circle11 sk-child"></div>
      <div class="sk-circle12 sk-child"></div>
    </div>
</div>
<div class="main-cont">
    <a>please enable javascript on your browser.<br>
      (uncomment out all js to see content.)
    </a>
</div>
<div class="cont">
    <a>all of youre contents.<br>
      (just comment out all js to see result.)
    </a>
</div>

禁用js时延迟css类属性

1 个答案: