How to disable the default animation when using removeByName to delete pages in Navigation?

#harmonyos #arkts #navigation #removebyname

Read the original article：How to disable the default animation when using removeByName to delete pages in Navigation?

Problem Description

When removeByName is used to delete a page in the navigation, an animation is displayed from the bottom. The API document does not provide a parameter for disabling the animation. How do I disable the animation?
The current effect is as follows:

Background Knowledge

customNavContentTransition: Sets the custom transition animation for navigation. The returned from and to parameters are used to obtain the destination page of the exit or entry, including the NavDestination name and sequence number, which can be used to distinguish different NavDestination pages.

Solution

You can use customNavContentTransition to set a custom transition animation. To disable the default animation of removeByName during the exit, set
Navigation to customNavContentTransition. The pages are distinguished by the returned name.

@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfo: NavPathStack = new NavPathStack();
  @State flag: boolean = false;

  aboutToAppear(): void {
    let eventhub = this.getUIContext().getHostContext()?.eventHub;
    eventhub!.on('removeByNameEvent', () => {
      this.flag = true;
    });
  }

  build() {
    Navigation(this.pageInfo) {
      Column({ space: 10 }) {
        Button('Click me to push the second page.')
          .onClick(() => {
            this.pageInfo.pushPathByName('SubPage', null, false);
          });
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%');
    }
    // Set custom transition animations
    .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
      console.info(`current info: ${to.name}, index: ${to.index}, mode: ${to.mode}`);
      console.info(`pre info: ${from.name}, index: ${from.index}, mode: ${from.mode}`);
      console.info(`operation: ${operation}`);
      // Distinguishing specific pages by name.
      if (from.name == 'SubPage' && this.flag === true) {
        this.flag = false;
        let customAnimation: NavigationAnimatedTransition = {
          onTransitionEnd: (isSuccess: boolean) => {
            console.info(`current transition result is ${isSuccess}`);
          },
          timeout: 100,
          // This method is called when the transition starts, and the transition context proxy object is passed as an argument.
          transition: () => {
            if (operation == NavigationOperation.POP) {
              this.getUIContext().animateTo({
                duration: 0, // The duration is set to 0.
              }, () => {
              });
            }
          }
        };
        return customAnimation;
      }
      return undefined;
    });
  }
}

@Builder
export function RegisterBuilder(): void {
  SubPage();
}

@Component
struct SubPage {
  @Consume('pageInfo') pathStack: NavPathStack;

  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Button('removeByName current page.')
          .onClick(() => {
            let eventhub = this.getUIContext().getHostContext()?.eventHub;
            // The flag for distinguishing removeByName events from page return events is set through eventHub.
            eventhub!.emit('removeByNameEvent');
            this.pathStack.removeByName('SubPage');
          });
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Transparent);
    }
    .title('Page 2')
    .width('100%')
    .height('100%');
  }
}

In the module.json5 file in the src/main directory, set the module field to "routerMap": "$profile:router_map" and add the router_map.json file to the src/main/resources/base/profile directory. The following is an example of the router_map.json file.

{
  "routerMap": [
    {
      "name": "SubPage",
      "pageSourceFile": "src/main/ets/pages/SubPage.ets",
      "buildFunction": "RegisterBuilder"
    }
  ]
}