Question

我想在页面（#sections）上设置div的集合，以便第一个div（#splash）充当启动页面来迎接用户，然后永远不会滚动到再次/删除。我使用css转换完成了这个，但是在#sections之前占用的地方显示了空白。如何在不泄露空白的情况下实现此功能？

＆＃13;

const sections = document.querySelector('#sections');
const body = document.body;

function intro() {
    body.classList = 'hide-splash'
}

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        intro()
    }, 1000);
});

＆＃13;

#splash,
#main {
  height: 100vh;
  width: 100vw;
}
#sections {
  transform: translateY(0vh);
  transition: transform 1s ease;
}
.hide-splash #sections {
  transform: translateY(-100vh);
}





#splash {
  background-color: #ffa500;
}
#main {
  background-color: lightcyan;
}
#secondary {
  background-color: lightcoral;
}
footer {
  background-color: Aquamarine;
}

＆＃13;

<div id="wrapper">
        <div id="sections">
            <div id="splash">SPLASH</div>
            <div id="main">MAIN</div>
            <div id="secondary">
                <ul>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                    <li>SECONDARY</li>
                </ul>
            </div>
            <footer>
                <ul>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                    <li>FOOTER</li>
                </ul>
            </footer>
        </div>
    </div>

＆＃13;

Answer 1

有很多选择：

> install.packages("VTrack")
Installing package into ‘/Users/JoniFitzsimmons/Library/R/3.3/library’
(as ‘lib’ is unspecified)

  There is a binary version available but the source version is later:
       binary source needs_compilation
VTrack   1.11   1.21             FALSE

installing the source package ‘VTrack’

trying URL 'https://cran.rstudio.com/src/contrib/VTrack_1.21.tar.gz'
Content type 'application/x-gzip' length 146180 bytes (142 KB)
==================================================
downloaded 142 KB

Warning in strptime(xx, f <- "%Y-%m-%d %H:%M:%OS", tz = tz) :
  unknown timezone 'default/Australia/Sydney'
* installing *source* package ‘VTrack’ ...
** package ‘VTrack’ successfully unpacked and MD5 sums checked
** R
** data
** inst
** preparing package for lazy loading
Warning: package ‘foreach’ was built under R version 3.3.2
Error in loadNamespace(j <- i[[1L]], c(lib.loc, .libPaths()), versionCheck = vI[[j]]) : 
  there is no package called ‘classInt’
ERROR: lazy loading failed for package ‘VTrack’
* removing ‘/Users/JoniFitzsimmons/Library/R/3.3/library/VTrack’
Warning in install.packages :
  installation of package ‘VTrack’ had non-zero exit status

The downloaded source packages are in
	‘/private/var/folders/rg/b0kybdls3svfw1hgh9236x4c0000gp/T/Rtmp0gCMUm/downloaded_packages’

const sections = document.querySelector('#sections');
const body = document.body;

function intro() {
    body.classList = 'hide-splash'
}

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        intro()
    }, 1000);
});

#splash,
#main {
  height: 100vh;
  width: 100vw;
}
#splash {
  transition: transform 1s, height 1s;
}
.hide-splash #splash {
  transform: translateY(-100vh);
  height: 0;
}


#splash {
  background-color: #ffa500;
}
#main {
  background-color: lightcyan;
}
#secondary {
  background-color: lightcoral;
}
footer {
  background-color: Aquamarine;
}

在css翻译动画后删除空格

1 个答案: