Vue JS Transition not working Nuxt JS Project

Question

This animation working Vue JS project and not working Nuxt JS Project. What could be wrong with my code?

My animation code is like this.

<transition name="fade">
  <div :class="index === 0 ? 'ua-border-radius-top-24' : index === thisArray.length - 1 ? 'ua-border-radius-bottom-24 mt-2' : 'mt-2'" class="ua-h-79-px p-2 shadow-sm ua-bg-color-white ua-hover-pointer">
     <div class="container-fluid">
       <div class="row">
         <div class="col-2 col-lg-3 ua-border-right-theme-blue ua-flex-full-align ua-h-65-px">
           <img class="img-fluid" :src="thisType === 'notice' ? '/notice-icon-2.svg' : ''" alt="">
         </div>
         <div class="col-10 col-lg-9">
           <div class="ua-flex-vertical ua-h-65-px">
             <div>
               <a class="ua-text-size-12 ua-text-color-theme-blue">{{$moment(item.createdAt).format('DD.MM.YYYY') }}</a>
             </div>
             <div>
               <a class="d-block d-lg-none d-xl-block ua-text-size-12 ua-text-color-dark">{{item.title.length >= 50 ? `${item.title.substring(0, 50)}...` : item.title}}</a>
               <a class="d-none d-lg-block d-xl-none ua-text-size-12 ua-text-color-dark">{{item.title.length >= 40 ? `${item.title.substring(0, 38)}...` : item.title}}</a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </transition>

My style codes are as follows.

.fade-enter {
  color: red;
  transform: translateY(20px);
}

.fade-enter-active {
  transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.fade-leave-active {
  transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.fade-leave-to {
  transform: translateX(100px);
  color: cyan;
}

Answer 1

Adding a transition key to your component should fix the problem.

export default { transition: 'fade' }

https://nuxtjs.org/docs/features/transitions/