Vue Enter / Leave Transition, похоже, плохо работает с Opacity - PullRequest
0 голосов
/ 17 марта 2020

Vue. js v2.2.1

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

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 0.5;
}

". Fade-enter-to, .fade- оставить "предполагается установить состояние после перехода, но не работает должным образом.

Ожидается: Плавный переход от" непрозрачность 0 "до" непрозрачность 0,5 "

Факт: Плавный переход от «непрозрачности 0» до «непрозрачности 0,5», затем внезапный переход к «непрозрачности 1»

1 Ответ

0 голосов
/ 17 марта 2020

Классы переходов удалены, и переход не имеет должного ослабления, вы должны добавить свойство перехода в класс .square.

.fade-enter,
.fade-leave-to {

  opacity: 0;

}

.fade-enter-to,
.fade-leave {

  opacity: .5;

}

.square {

  margin-top: 2rem;
  height: 10rem;
  width: 10rem;
  background-color: #000;
  transition: opacity .5s linear;

}
...