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

Question

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

我有菜单滑出并压缩网页，但服务器上的网页有点慢（复杂的页面和调用 python 字符串等），并且它导致在页面内容加载之前显示下面的菜单闪烁.所以我认为我想在页面加载时隐藏菜单，也许直到你点击触发图标。我已经尝试了很多东西，但不知道该怎么做。我确信它很简单，而且我只是不完全理解“复选框黑客”。欢迎任何其他建议！我不能有 javascript，只有 css。

额外，但会有所帮助：如果有人可以帮助我实现那个动画图标（在主页图标下）而不是主页图标，那将非常有帮助。我好像搞不懂。

编辑：我意识到导致闪光的原因是transition: all 0.4s ease 0s; on .site-wrap。因为它在我的服务器上比较慢，所以过渡变慢了，当整个页面过渡时你可以看到底层菜单。不确定是否有办法将left 和right 转换结合起来，而不是all。

编辑：当 python 字符串在内容中被调用时，我无法在 jsfiddle 上重现此问题，仅在我的服务器上。

我希望这一切都有意义！

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

/* 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;
}

<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>

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 上调试它。希望这会有所帮助！