自定义转场动画的透明度控制问题？

Question

我在自定义页面转场动画时，希望控制进入页面的透明度逐渐变化，但是发现@keyframes中的opacity属性并没有按预期工作。请问这是哪里出了问题？我该如何正确设置透明度动画？请附上你的动画配置代码。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

自定义转场动画中透明度的控制可能需要确保动画关键帧（keyframes）被正确定义，并且透明度（opacity）属性被正确应用。此外，还需要确保动画被正确触发。

/* 定义动画关键帧 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 应用动画到元素 */
.page-enter-active {
  animation: fade-in 0.5s;
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。