HarmonyOS鸿蒙Next中使用systemTransition.None关闭页面转场动画,pop此页面再push其他页面时会有延迟现象

HarmonyOS鸿蒙Next中使用systemTransition.None关闭页面转场动画,pop此页面再push其他页面时会有延迟现象 当某个页面(这里为页面2)的systemTransition属性设置为None时:

@Component
struct Page02 {
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination()
    ...
    .title('页面2')
    .backgroundColor('#ffffdbdb')
    .systemTransition(NavigationSystemTransitionType.NONE)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

如果在页面2里先pop再push一个页面3,会发现页面2会停留一会然后跳转到页面3,具体操作如下:

Button(`pop, push Page03 (normal)`)
  .width('80%')
  .margin({ top: 10, bottom: 10 })
  .onClick(() => {
    this.pathStack?.pop();
    this.pathStack?.pushPath({ name: 'Page03' });
  })

效果如下:

这个场景可以使用NEW_INSTANCE来规避,有了NEW_INSTANCE,即使跳转后栈顶页面不在栈中,跳转也会执行push动画。

在push动画中,新的栈顶页面(这里为页面3)会一直处于最上层,而原先的栈顶页面(这里为页面2)会被新的栈顶页面遮住,这样视觉效果就是只有页面3在做push动画,示例如下:

Button(`pop, push Page03 (normal)`)
  .width('80%')
  .margin({ top: 10, bottom: 10 })
  .onClick(() => {
    this.pathStack?.pop();
    this.pathStack?.pushPath({ name: 'Page03' }, { launchMode: LaunchMode.NEW_INSTANCE });
  })

效果如下:


更多关于HarmonyOS鸿蒙Next中使用systemTransition.None关闭页面转场动画,pop此页面再push其他页面时会有延迟现象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中,使用systemTransition.None关闭页面转场动画后,pop当前页面再push其他页面时出现延迟现象,可能是由于系统在处理页面切换时缺少动画过渡,导致页面渲染和切换逻辑未能及时同步。建议检查页面生命周期管理和资源释放情况,确保页面切换时不会因资源占用或渲染阻塞导致延迟。

更多关于HarmonyOS鸿蒙Next中使用systemTransition.None关闭页面转场动画,pop此页面再push其他页面时会有延迟现象的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的页面转场动画控制问题。在HarmonyOS Next中,当页面设置了systemTransition.None后,系统默认会使用pop动画来处理页面跳转,导致出现延迟现象。

解决方案确实如您所述,使用NEW_INSTANCE模式可以强制使用push动画来替代默认的pop动画。这是因为:

  1. 默认情况下,系统会检测到页面2被pop出栈,因此触发pop动画
  2. pop动画会让页面2保持可见直到动画完成
  3. 使用NEW_INSTANCE后,系统会视为新页面压栈,触发push动画
  4. push动画会立即将新页面(页面3)置于最上层

这种处理方式在视觉上更为流畅,避免了页面2的延迟显示问题。您提供的代码示例和效果对比很好地展示了这个解决方案的有效性。

对于需要精细控制页面转场动画的场景,这是一个实用的技巧。

回到顶部