Enter/Leave transition not working with opacity

[zhzhang-4390]

Version

2.6.11

Reproduction link

https://jsfiddle.net/loop_/59g7w1pa/8/

Steps to reproduce

N.A.

What is expected?

Smooth transition from "opacity 0" to "opacity 0.5"

What is actually happening?

Smooth transition from "opacity 0" until "opacity 0.5", then suddenly jump to "opacity 1"

---

".fade-enter-to, .fade-leave" are supposed to set the state after transition, but not working as expected.

[posva]

This is expected because the .fade-*-active class is removed after the transition ends on opacity .5. Move the transition: opacity .5s; somewhere else that is always applied if you always want to have transitions on opacity

[zhzhang-4390]

This is expected because the .fade-*-active class is removed after the transition ends on opacity .5. Move the transition: opacity .5s; somewhere else that is always applied if you always want to have transitions on opacity

When I moved the transition: opacity .5s; to my html element itself, what happened was:

1. Took 0.5s to reach opacity 0.5, then took another 0.5s to reach opacity 1, but what I want is opacity 0.5 being final.
2. If I put opacity 0.5 into my html element as well (in order to finalize it), it would then overwrite the whole .fade-*, and not animating at all

I don't see any solution here.

[ferdinandant]

CSS order matters, so put the animation styles under your original style:

.square {
  margin-top: 2rem;
  height: 10rem;
  width: 10rem;
  background-color: #000;
  opacity: 0.5;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}