Transition not run on page load

Hey guys, I implemented several complex transitions with router-view, and I’m stuch with what I thought was very simple. Please focus on <navigation></navigation>.

my App.Vue:

<style src="./sass/main.scss" lang="scss"></style>

<template>
  <section id="app" class="flex">
    <div class="full-height flex main-content" role="main">
      <transition name="fade" appear mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <transition name="menu" appear>
      <navigation></navigation>
    </transition>
  </section>
</template>

<script>
  import navigation from './components/Navigation/Navigation'

  export default {
    components: {
      navigation
    },
    name: 'app'
  }
</script>

So, navigation is not been transitioned onload… why? I have the appear attribute.

Navigation.vue :

<style src="./navigation.scss" lang="scss" scoped></style>

<template>
  <nav class="container" role="navigation" itemscope itemtype="http://schema.org/BreadcrumbList">
    <div class="menu-item" itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
      <router-link to="/" exact itemprop="item">
        <span itemprop="name">intro</span>
      </router-link>
    </div>
    <div class="menu-item" itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
      <router-link to="/resume" itemprop="item">
        <span itemprop="name">résumé</span>
      </router-link>
    </div>
    <div class="menu-item" itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
      <router-link to="/projects" itemprop="item">
        <span itemprop="name">projects</span>
      </router-link>
    </div>
    <div class="menu-item" itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
      <a href="https://medium.com/@gplusgr" target="_blank" rel="nofollow">
        <span itemprop="name">writings</span>
      </a>
    </div>
  </nav>
</template>

<script>
  export default {
    name: 'navigation',
    data () {
      return {
      }
    }
  }
</script>

and the CSS :

// Animate Menu
.menu-item {
  transition: all .5s ease-in;
}
.menu-enter-active {
  @include loopchildren(1,4,0.1,'.menu-item');
}
.menu-leave-active {
  transition: all .3s ease;
}
.menu-leave-to {
  opacity: 0;
}
.menu-enter {
  opacity: 0;
  .project {
    opacity: 0;
  }
}
@mixin loopchildren($min, $max, $initialValue, $className) {
  @for $i from $min through $max {
    #{$className}:nth-child(#{$i}) {
      transition-delay: #{($initialValue)}s;
    }
    $initialValue: $initialValue + 0.1;
  }
}

https://github.com/vuejs/vue/issues/733 according to this, u can only do so if the component is attached or detached, it might not be available to render transition on page load.

I dont know if my suggestion is possible but you can test it —> what if u make a dummy component which will be empty, and set a time interval to change after 0.5s or 1s after the page loads, by doing so it will transition for your navigation component (In my opinion not sure if can work, but i dont see why not)

It actually works. My classes were wrong.

Dude, when you have a Problem and u solve it, it would be nice when you tell us whats went wrong.
Have the same Problem and dont know what you did :frowning: