Question

我确信这很容易解决。我需要我的预载器慢慢淡出。我尝试使用css动画，但没有工作。谁能告诉我如何在javascript中这样做？正如您在示例中所看到的，过渡非常粗糙。我不希望这样。

<script> <!--Preloader-->
var myVar;

function preloader() {
    myVar = setTimeout(showPage, 1500);
}

function showPage() {
  document.getElementById("preloader").style.display = "none";
  document.getElementById("wrapper").style.display = "block";
}
</script>

CODEPEN EXAMPLE

Answer 1

在您的代码中添加以下更改。

DELIMITER |
    CREATE TRIGGER `add2` AFTER UPDATE ON `route`
    FOR EACH ROW 
    BEGIN
       IF(new.driver_d_name!=old.driver_d_name) THEN
            UPDATE loc
            SET drivername = new.driver_d_name
            WHERE rt_nanme = old.rt_num;
        END IF;
       IF(new.rt_num!=old.rt_num) THEN
           UPDATE loc
            SET rt_nanme = new.rt_num
            WHERE rt_nanme = old.rt_num;    
          END IF;
    END;
    |   
    DELIMITER ;

Answer 2

转换doent适用于显示块而没有..

使用

var myVar;

function preloader() {
    myVar = setTimeout(showPage, 1500);
}

function showPage() {
  document.getElementById("preloader").style.opacity = 0;
  document.getElementById("wrapper").style.opacity = 1;
}

和

#preloader {
  position: absolute;
  z-index: 1000;
  background-color:black;
  width: 100vw;
  height: 100vh;
  color:white;
  transition: 0.5s all linear
}

Answer 3

试试这个例子可以帮到你。

$(function() {
  $("#loader-image").fadeIn(500, function() {
    $("#loader-image").fadeOut(1000, function() {
      $(".loader-container").fadeOut(1000, function() {
        alert("loaded!");
      });
    });
  });
});

body {
  background-color: black;
}
.loader-container {
  background-color: yellow;
  height: 200px;
}
#loader-image {
  display: none;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<body>
  <div class="loader-container">
    <img src="image.png" alt="Image" id="loader-image" />
  </div>
</body>

Answer 4

您可以使用CSS转换。将预加载器样式更改为：

#preloader {
  position: absolute;
  z-index: 1000;
  background-color:black;
  width: 100vw;
  height: 100vh;
  color:white;
  display: block;
  opacity: 1; // Add opacity
  transition: 1s opacity ease-in; // Add transition
}

为隐藏类添加样式：

#preloader.hidden {
  opacity: 0;
}

然后当你致电showPage()

时

function showPage() {
      // Add the newly defined hidden class to the preloader element
      document.getElementById("preloader").classList.add('hidden');
}

Here是一个有效的例子。

预加载器淡出，内容淡入

4 个答案: