【HarmonyOS NEXT】如何禁用页面转场动画

【关键字】

模块内页面跳转 / @ohos.router（页面路由）模块 / Navigation组件

【问题描述】

根据文档（https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-page-transition-animation-0000001820879813）描述，可通过以下代码禁用页面转场动画：

pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}

实际操作：创建空Demo，进行代码测试。

Index页面代码：

import router from '@ohos.router';

@Entry
@Component
struct Index {
@State message: string = 'Hello World';

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/Second' })
})
}
.width('100%')
}
.height('100%')
.backgroundColor('#FF0000')
}
}

Second页面代码：

import router from '@ohos.router'

@Entry
@Component
export struct Second {

build() {
Column() {
Text('Back')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#0000FF')
}

pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
}

问题：Index页面push Second页面时，动画被禁用，但Second页面返回Index页面时，动画依然存在，是什么原因？

【解决方案】

@ohos.router（页面路由）模块适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，建议您使用Navigation组件进行页面跳转。Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。因此推荐使用Navigation，router后续暂不演进。

Navigation组件进行页面跳转的使用方法，可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation-0000001821000861#ZH-CN_TOPIC_0000001821000861__%E7%A4%BA%E4%BE%8B2

另外，按照问题描述中所说，若使用pageTransition禁用页面转场动画时，在进入页和退出页中均需要进行设置。并且如果仅Second页面不需要动画，Index页面推入Third页面仍需要动画，可通过设置进入页和退出页的duration参数来实现。示例代码如下：

// Index页面
import router from '@ohos.router';

@Entry
@Component
struct Index {
@State message1: string = 'Hello World1';
@State message2: string = 'Hello World2';

build() {
Row() {
Column() {
// Image($r("app.media.good"))
// .height(500)
Text(this.message1)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/second' })
})

Text(this.message2)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({ url: 'pages/three' })
})
}
.width('100%')
}
.height('100%')
.backgroundColor('#A0FF0000')
}

pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 1000 })
PageTransitionExit({ type: RouteType.None, duration: 1000 })
}
}

// Second页面
import router from '@ohos.router'

@Entry
@Component
export struct Second {

build() {
Column() {
// Image($r("app.media.ic_ai"))
// .height(500)
Text('Back')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#A00000FF')
}

pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
}

// Third页面
import router from '@ohos.router'

@Entry
@Component
export struct three {

build() {
Column() {
// Image($r("app.media.ic_ai"))
// .height(500)
Text('Back3')
.onClick(() => {
router.back()
})
}
.width('100%')
.height('100%')
.backgroundColor('#A00000FF')
}

pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 1000 })
PageTransitionExit({ type: RouteType.None, duration: 1000 })
}
}