vuejs3 - 元素出现时Vue3转换工作不正确

Question

问题是在元素消失时过渡可以正常工作，但在出现时根本不工作。我正在使用 Vue3

<transition name='accepted'>
      <span v-if='agreement.accepted'>
          accepted at {{ agreement.acceptedAt.toLocaleDateString() }}
      </span>
    </transition>

cssy

.accepted-enter-from, .accepted-leave-to {
  opacity: 0;
}

.accepted-enter-active, .accepted-leave-active {
  transition: opacity 5s ease;
}