부분 불투명도 전환

부분 불투명도 전환

나는 팝업과 오버레이를 활성화하기 위해 여기 안내서를 따라가고 있다.나는 최종 불투명도가 0.5인 오버레이가 필요하지만 Vue는 마지막에 1로 설정했다.나는 이런 것을 시도했지만, Vue는 불투명도를 0.5로 애니메이션화했고, 애니메이션이 끝날 때 갑자기 1로 바꾸었다.

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 2s;
}
.fade-enter-to {
  opacity: 0.5;
}

여기 이 문제를 설명하는 테스트가 있다. https://jsfiddle.net/50wL7mdz/58865/

갱신하다

워킹 솔루션 https://jsfiddle.net/50wL7mdz/58877/은 페이드 클래스에 최종 불투명도를 추가할 필요가 없다.

오피셜도 셋팅해야죠..overlay클래스(전환 완료 후 사용 예정):

.overlay {
  width: 50px;
  height: 50px;
  background-color: red;
  opacity: 0.5;
}

여기 피들레가 있다.

참조URL: https://stackoverflow.com/questions/46060557/transition-with-partial-opacity