HarmonyOS 鸿蒙Next如何去掉页面的跳转动画

有页面A，现需要跳到页面B。需求是保留页面A，跳页面B时，不要页面自带的左滑动画效果，如何去掉动画？

您可以尝试在B页面使用pageTransition禁用页面转场动画，根据您的需要在进入页和退出页进行设置，文档请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-transition-animation-V5#ZH-CN_TOPIC_0000001930675281__%E7%A6%81%E7%94%A8%E6%9F%90%E9%A1%B5%E9%9D%A2%E7%9A%84%E9%A1%B5%E9%9D%A2%E8%BD%AC%E5%9C%BA

以下是以进入B页面无转场动画，返回时有动画的设置，您可以根据您的实际需求来更改。

demo:

Index

import {PageA} from './PageA'

@Entry

@Component

struct Example {

  build() {

   Column() {

     PageA()

   }

  }

}

PageA

import { router } from '@kit.ArkUI';

@Entry

@Component

export struct PageA {

  @State message: string = 'PageTransitionTestA';

  @State pageTransitionDuration: number = 0

  build() {

    Column() {

      Text("To B With Animation")

        .fontSize(30)

        .fontWeight(FontWeight.Bold)

        .onClick(() => {

          this.pageTransitionDuration = 0

          router.pushUrl({

            url: "pages/PageB"

          })

        })

    }

    .justifyContent(FlexAlign.Center)

    .height('100%')

    .width('100%')

  }

  pageTransition() {

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

    // PageTransitionExit({ duration: this.pageTransitionDuration })

  }

}

PageB

@Entry

@Component

struct PageTransitionTestB {

  @State message: string = 'PageTransitionTestB';

  build() {

    RelativeContainer() {

      Text(this.message)

        .id('PageTransitionTestBHelloWorld')

        .fontSize(50)

        .fontWeight(FontWeight.Bold)

        .alignRules({

          center: { anchor: 'container', align: VerticalAlign.Center },

          middle: { anchor: 'container', align: HorizontalAlign.Center }

        })

    }

    .backgroundColor(Color.White)

    .height('100%')

    .width('100%')

  }

  pageTransition() {

    PageTransitionEnter({duration: 0})

    PageTransitionExit({duration: 0})

  }

}

main_pages.json

{

  "src": [

    "pages/Index",

    "pages/PageB"

  ]

}

bupafengyu 2楼•3 天前

在HarmonyOS鸿蒙Next中，去掉页面的跳转动画可以通过设置页面转场效果为无动画来实现。具体操作如下：

使用PageTransition函数：
- 在需要去掉跳转动画的页面中，使用PageTransition函数来设置进入和退出的动画效果。
- 将PageTransitionEnter和PageTransitionExit的type属性设置为RouteType.None，duration属性设置为0，表示无动画效果。

示例代码：

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

注意事项：
- 确保在进入页和退出页中都进行了相应的设置，否则可能会出现只有单向跳转无动画的情况。
- 如果使用的是router.pushUrl或router.back等方法进行页面跳转，并希望去掉动画效果，同样需要在相关页面中设置PageTransition函数。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。