title: Prevent menu animation transition on page load
body: <p>I'm building a menu with an &quot;indicator&quot; just like this codepen: <a href="https://codepen.io/jnowland/pen/XmQGNx" rel="nofollow noreferrer">https://codepen.io/jnowland/pen/XmQGNx</a></p>
  <p>Everything works perfectly except for one little tiny detail: When the link is clicked and that page loads, the indicator animates from the previous child before settling on the link that just became .active. This can't be seen in the linked example, only the hover effect. This is a screen recording of my menu (sorry for the low gif framerate):
  <a href="https://i.stack.imgur.com/hOuLK.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hOuLK.gif" alt="Screen recording of css menu" /></a></p>
  <p>You can see how the hover works perfectly but note how the transition jumps from the menu item before after a link is clicked and that page loads. I don't want a transition here. How can I prevent that? My code looks almost exactly the same as the codepen for the parts that control this so please refer to the code in the link.</p>
  <pre><code>.Nav-item {
      &amp;:last-child {
        &amp;:before, &amp;:after {
          content: '';
          display: block;
          position: absolute;
          pointer-events: none;
          transition: left #{$transition-speed} ease;
        }
  </code></pre>
  <p>My initial thought was deleting the transition from this part but it messes up the whole transition so it has to stay.</p>
  <pre><code>.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
      {
        left:($width*$i)+($width/2)-$width;
  </code></pre>
  <pre><code>.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{
        left:($width*$i)+($width/2)-$width !important;
      }
  </code></pre>
  <p>Adding the transition inside these two and delete from the first code block doesn't seem to be the right way to go either.</p>