Is it possible to animate one component on vue.js?

Question

css

I'm trying to figure out animation in vue.js, there is a component that reflects the image slider element in itself, so an animated transition between several of them is needed. Without animation, everything works fine, the pictures are flipped in the right order, so about the logic here, in general, everything is okay. Based on the vue.js documentation, I wrote the following piece of code:

<transition name="fade">
      <slide-item v-if="state == 'first'"
                         :url="sources[number]"
                         @next="next"
      >			
      </slide-item>
      <slide-item v-else-if="state == 'second'"
                         :url="sources[nextNumber]"
                         @next="next"
      >			
      </slide-item>
</transition>

I wrote all the animations separately:

.fade-enter {
  
}

.fade-enter-active {
  animation: fadeIn .3s linear;
}

.fade-leave {
  
}

.fade-leave-active {
  animation: fadeOut .3s linear;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;	
  }
}

But, I did not see any transitions, and none from the word at all.
The most interesting thing is that if I create exactly the same component, for example, slide-item-1, with the same properties, styles, etc. (that is, an absolute clone of the slide-item) and insert it instead of the second slide-item, then the animations will work.
But doing so is completely stupid, because. because of this, not just a piece of code is duplicated, but the entire component as a whole. Is it really impossible to animate different instances of the same component in vue?

Answer 1

Here is your solution
. Usually you only need to wrap one block in a transition, and you are trying to cram two into it. Just split them into two transits and that's it.

Answer 2

If you need a smooth appearance, but there is no need to use animation, a simple transition is enough .
You just need to either put down so that the components overlap each other and do not jump, or specify - Transition Modes . position: absolutemode="out-in"