0

I want a transition in my VueJS 3 project between 2 pages. I have a button and when I click on it, it goes on a new page with a dynamic URL. I would like a transition here. I don't have any errors but there is no transition when I change the page. I don't know why. It's true that initially I didn't had a <router-view/> tag, I had to add it to make the transition, maybe it doesn't use the router-view when it is changing the page so doesn't see the transition.

Here my code :

    <template>
      <div class="p-grid">
        (...)
        <div class="p-col" v-if="infoItem.length === 0">
        </div>
        <div v-else>
          <router-link
              :to=" {
             name:
        'Detail',
        params: {
        id: infoItem.name,
        subcategory: infoItem.subcategory,
        name: infoItem.name,
        },
        }">
            <Button icon="pi pi-search-plus"></Button>
          </router-link>
          <router-view v-slot="{ Component }">
            <transition name="route" mode="out-in">
              <component :is="Component"></component>
            </transition>
          </router-view>
        </div>
    
    </template>
    
    <script>
    (
    ...)
    </script>
    
    <style>
    
    .p-grid {
      margin: 0.5rem;
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    }
    
    /* Route transition */
    .route-enter-from {
      opacity: 0;
      transform: translateX(100px);
    }
    
    .route-enter-active {
      transition: ass 0.3s ease-out;
    }
    
    .route-leave-to {
      opacity: 0;
      transform: translateX(-100px);
    }
    
    .route-leave-active {
      transition: ass 0.3s ease-in;
    }
    </style>

Do you any idea why ?

Thanks a lot

Kate P
  • 37
  • 8
  • First of all you might try fixing your wrong transitions. It should rather be `all` instead of `ass` - for `route-enter-active` and `route-leave-active`. – Aer0 Aug 03 '21 at 12:22
  • Thanks ! I changed but it didn't solve the problem, I already tried several CSS codes – Kate P Aug 03 '21 at 12:26
  • Code wise it's looking good. At least, I'm not seeing where the issue is. Might be helpful if you could set up a mvp on codesandbox.io or somewhere similair. – Aer0 Aug 03 '21 at 12:43
  • I read that sometimes comments before are the problem, I don't have comments in this component but in other above yes, maybe it is the reason https://stackoverflow.com/questions/66411838/vue-3-0-router-components-transition-does-not-work-with-mode-out-in – Kate P Aug 03 '21 at 12:52

0 Answers0