Masquer le menu glissant/poussant au chargement de la page ? (css uniquement)

Question

Je travaille sur un menu coulissant et j'ai une autre question (merci pour votre aide la dernière fois).

J'ai fait glisser le menu et compressé la page web, mais la page web sur le serveur est un peu lente (page complexe et appel de chaînes python, etc.) et cela provoque un flash du menu en dessous qui s'affiche avant le chargement du contenu de la page. J'ai donc pensez à Je voudrais masquer le menu au chargement de la page, peut-être jusqu'à ce que vous cliquiez sur l'icône de déclenchement. J'ai essayé un tas de choses et je n'arrive pas à trouver comment le faire. Je suis sûr que c'est simple, et que je ne comprends pas bien le "hack" de la case à cocher. Toute autre suggestion est la bienvenue ! Je ne peux pas avoir de javascript, seulement du css.

Extra, mais serait utile : Si quelqu'un pouvait m'aider à mettre en place cette icône animée (sous l'icône d'accueil) à la place de l'icône d'accueil, ce serait super utile. Je n'arrive pas à comprendre.

Edit : J'ai réalisé que ce qui causait le flash était transition: all 0.4s ease 0s; sur .site-wrap . Parce qu'il est plus lent sur mon serveur, la transition est ralentie et vous pouvez voir le menu sous-jacent lorsque la page entière est en transition. Je ne sais pas s'il existe un moyen de faire left y right transition combinée, plutôt que all .

Edit : Je ne peux pas reproduire ce problème sur jsfiddle, seulement sur mon serveur lorsque les chaînes python sont appelées dans le contenu.

J'espère que tout cela a du sens !

Voici mon jsfiddle pour référence : 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

RÉPONSE ACTUALISÉE Après clarification, ce problème se produit lorsque les animations CSS sont appelées au chargement de la page. Pour résoudre ce problème sans Javascript, utilisez des images clés sans définir d'animations. Ces images clés seront exécutées au chargement de la page et empêcheront la transition de se produire.

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

Bien qu'une meilleure solution serait de suivre les étapes dans cette réponse pour configurer l'animation de la navigation.

PREMIÈRE RÉPONSE Cacher le menu lors du chargement initial de la page en ajoutant display: none; à la navigation classe.

Utilisez ensuite le code ci-dessous pour rendre la navigation à nouveau visible. Placez le code dans le callback de réussite de la requête de base de données. Ainsi, lorsque la requête de la base de données revient avec succès, la navigation sera affichée.

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

ou ceci si vous utilisez jQuery :

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

Si vous n'avez pas de fonction de rappel, vous pouvez aussi utiliser setTimeout pour ajouter un délai avant de rendre la navigation à nouveau visible.

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

Bien que pour être honnête, je ne comprends pas pourquoi le menu est visible en attendant que la requête de la base de données soit retournée, mais il est difficile de déboguer cela à partir de ce qui est sur jsFiddle. J'espère que cela vous aidera !