Question

我的网站上有一个预加载器的代码如下：

<script>
  setTimeout(function() {
    document.getElementById("loader-wrapper").style.display = 'none';
  }, 1250);
</script>
<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader"></div>
  </div>
</div>

目前div在1.25秒后消失，但是如何在1.25秒之后使loader-wrapper淡出（不使用CSS或jQuery）？

Answer 1

你可以在loader元素上使用内联样式来实现：

<script>
  setTimeout(function() {
    var el = document.getElementById("loader-wrapper");
    // 1s - time of the animation duration
    // set transition property for webkit browsers only
    el.style.WebkitTransition = 'opacity 1s ease-in-out;'
    el.style.opacity = '0';
  }, 1250);
</script>

JSbin link。

要为所有浏览器设置转换，您需要设置所有转换属性。你可以从question获得。

有关更多信息和动画示例，请查看此question。

Answer 2

最终为我工作的是什么：

<script>
  setTimeout(function() {
    var loader = document.getElementById("loader-wrapper");
    loader.style.WebkitTransition = 'visibility .5s, opacity .5s';
    loader.style.opacity = '0';
    loader.style.visibility = 'hidden';
  }, 1250);
</script>

这会将可见性设置为隐藏，并允许loader-wrapper div下面的所有内容与之交互（在我的情况下，按钮和表单）。

Answer 3

查看$jum = \app\models\Kelurahandesa::find() ->innerJoinWith('company', 'kelurahandesa.id_kelurahandesa = perusahaan.id_kelurahandesa') ->select('id_kelurahandesa, nama_kelurahandesa') ->where(['kelurahandesa.kode_kabupaten' => $kodekab, 'kelurahandesa.kode_kecamatan' => $kodekec]) ->distinct() ->count(); $kecamatan = \app\models\Kelurahandesa::find() ->innerJoinWith('company', 'kelurahandesa.id_kelurahandesa = perusahaan.id_kelurahandesa') ->where(['kelurahandesa.kode_kabupaten' => $kodekab, 'kelurahandesa.kode_kecamatan' => $kodekec]) ->distinct() ->orderBy('id_kelurahandesa') ->all(); for ($i = 0; $i < $jum; $i++) { //$out = ['id' => $kecamatan[$i]['id_kecamatan'], 'name' => $kecamatan[$i]['nama_kecamatan']]; $out[] = ['id' => $kecamatan[$i]['id_kelurahandesa'], 'name' => $kecamatan[$i]['kode_kelurahandesa'] . ' ' . $kecamatan[$i]['nama_kelurahandesa']]; } JavaScript语法。

这是@ Owen Sullivan's solution的简化运行示例。

<?=
        $form->field($model, 'id_kelurahandesa')->dropDownList(ArrayHelper::map(\app\models\Kelurahandesa::find()
                ->innerJoinWith('company', 'kelurahandesa.id_kelurahandesa = perusahaan.id_kelurahandesa')
                                ->where(['kelurahandesa.kode_kabupaten' => $kodeuserPPKK, 'kelurahandesa.kode_kecamatans' => '020'])
                                ->orderBy('id_kelurahandesa')
                                ->all(), 'id_kelurahandesa', function($model) {
                    return $model->kode_kelurahandesa . ' ' . $model->nama_kelurahandesa;
                }), ['id' => 'sssss-id', 'prompt' => 'Kelurahan/Desaa...'])
        ?>

->innerJoinWith('company', 'kelurahandesa.id_kelurahandesa = perusahaan.id_kelurahandesa')

如何使用纯JavaScript淡出div？

3 个答案: