在页面加载时隐藏幻灯片/推送菜单？ （仅限CSS）

Question

我正在制作幻灯片/推出菜单并提出另一个问题（感谢上次的帮助）。

我将菜单滑出并压缩网页，但是服务器上的网页有点慢（复杂的页面和调用python字符串等），并且在页面内容加载之前显示下面的菜单的闪存。所以我想我想在页面加载时隐藏菜单，可能直到你点击触发器图标。我尝试了很多东西，但无法弄清楚如何去做。我确信这很简单，而且我还没有完全理解“复选框黑客攻击”。欢迎任何其他建议！我不能拥有javascript，只有css。

额外，但会有所帮助：如果有人可以帮我实现动画图标（在主图标下）而不是主页图标，那将是非常有用的。我似乎无法弄明白。

编辑：我意识到导致闪存的原因是transition: all 0.4s ease 0s; .site-wrap。因为它在我的服务器上速度较慢，所以转换速度变慢，您可以在整个页面转换时看到底层菜单。不确定是否有办法合并left和right转化，而不是all。

编辑：我无法在jsfiddle上重现这个问题，只是在我的服务器上调用内容中的python字符串时。

我希望这一切都有意义！

这是我的jsfiddle供参考： https://jsfiddle.net/2u64k0xq/6/

＆＃13;

＆＃13;

/* Navigation Menu - Background */

.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  /* non-critical appearance styles */
  list-style: none;
  background: #1c2227;
}
/* Navigation Menu - List items */

.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #1c2227;
  border-bottom: 1px solid #000;
}
.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: #1c2227;
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
  color: #c74438;
}
/* Site Wrapper - Everything that isn't navigation */

.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  background-color: #f3f6f8;
  /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  float: right;
  right: 0;
  z-index: 1;
  /* non-critical apperance styles */
  background-size: 200%;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
/* Nav Trigger */

.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 2;
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("http://icons.iconarchive.com/icons/artua/mac/256/Home-icon.png");
  background-size: contain;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
/* Make the Magic Happen */

.nav-trigger + label,
.site-wrap {} .nav-trigger:checked + label {
  left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
  min-width: calc(100% - 200px);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  width: calc(100% - 200px);
}
/* Micro reset */

html {
  position: relative;
  min-height: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font: .8em sans-serif;
  line-height: 1.4em;
  letter-spacing: .03em;
  height: 100%;
  padding: 0;
  margin: 0 0 0 0;
  overflow-x: hidden;
  background-color: #f3f6f8;
  color: #1c2227;
  background-attachment: fixed;
}
/* page styles */

.dds-header-wrapper {
  height: 4em;
  background-color: #1c2227;
}
.dds-header-dash-icon {
  background-color: #1c2227;
  width: 9em;
  color: #fff;
  height: 100%;
  float: left;
  font-size: .35em;
  line-height: 1.6em;
  text-align: center;
  padding-top: 3em;
  padding-left: 2em;
  -webkit-transition: all 0.10s ease-in-out;
  -moz-transition: all 0.10s ease-in-out;
  transition: all 0.15s ease-in-out;
  display: block;
  margin-left: -10px;
}
.dds-header-dash-icon:hover {
  margin-left: 0px;
  background-color: #3b3e43;
  display: block;
}

＆＃13;

<ul class="navigation">
  <li class="nav-item"><a href="#">Home</a>
  </li>
  <li class="nav-item"><a href="#">Portfolio</a>
  </li>
  <li class="nav-item"><a href="#">About</a>
  </li>
  <li class="nav-item"><a href="#">Blog</a>
  </li>
  <li class="nav-item"><a href="#">Contact</a>
  </li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium!
    Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
  <p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat,
    pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
  <p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem
    neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
  <p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam
    cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新的答案 进一步说明，在页面加载时调用CSS动画时会出现此问题。要在没有任何Javascript的情况下解决此问题，请使用未设置动画的关键帧。这些关键帧将在页面加载时运行，并防止发生转换。

// Add noAnimation keyframe to any class that has transitions
.nav-item a, .site-wrap {
    -moz-animation-name: noAnimation;
    -webkit-animation-name: noAnimation;
    animation-name: noAnimation;
}
// noAnimation keyframe
@-moz-keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}
@-webkit-keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}
@keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}

虽然更好的解决方案是按照this answer中的步骤设置导航动画。

第一个答案 首次加载页面时隐藏菜单，方法是将display: none;添加到navigation类。

然后使用下面的代码再次显示导航。将代码放在数据库请求的成功回调中。因此，当数据库请求成功返回时，它将显示导航。

document.getElementsByClassName('navigation').style.display = 'block';

或者如果您正在使用jQuery：

$('.navigation').css('display','block');

如果您没有回调功能，您还可以使用setTimeout添加延迟，然后再次显示导航。

// Will wait 200 milliseconds before running.
setTimout(function() {
    document.getElementsByClassName('navigation').style.display = 'block';
}, 200);

虽然老实说我不明白为什么在等待返回数据库请求时菜单是可见的，但是很难从jsFiddle上的内容调试它。希望这有帮助！