• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Navigation Transition
2
3
4Navigation transition is a transition animation that runs during the navigation from one view to another. The animation settings of the navigation transition are pre-defined and cannot be modified.
5
6
7To implement the navigation transition, you are advised to use the [\<Navigation>](../reference/arkui-ts/ts-basic-components-navigation.md) component, complete with the [\<NavRouter>](../reference/arkui-ts/ts-basic-components-navrouter.md) and [\<NavDestination>](../reference/arkui-ts/ts-basic-components-navdestination.md) components.
8
9
10Below is the complete sample code and effect.
11
12
13
14```ts
15@Entry
16@Component
17struct NavigationDemo {
18  private listArray: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
19
20  // Set the title bar menu, if a title bar is involved.
21  @Builder NavigationMenus() {
22    Column() {
23      Text('menu')
24        .fontColor('#182431')
25        .fontSize(14)
26        .lineHeight(19)
27        .opacity(0.4)
28        .margin({ top: 70 })
29    }
30    .alignItems(HorizontalAlign.Start)
31  }
32
33  build() {
34    Stack() {
35      Column() {
36        // Define the <Navigation> component, setting the display mode and title.
37        Navigation() {
38          // An <Input> component is defined here.
39          TextInput({ placeholder: 'Search...' })
40            .width('90%')
41            .height(40)
42            .backgroundColor('#ededed')
43            .margin({ bottom: 10 })
44
45          // Define the level-1 navigation view through <List>.
46          List({ space: 12, initialIndex: 0 }) {
47            ForEach(this.listArray, (item:number) => {
48              ListItem() {
49                // Define the navigation transition through <NavRouter> and define the navigation destination through <NavDestination>. Parameters are transferred between views through state variables or regular variables between components.
50                // <NavRouter> must contain two child components. The first child component is the level-1 navigation view, and the second child component must be <NavDestination>, which specifies the navigation destination.
51                NavRouter() {
52                  // First component: Level-1 navigation view.
53                  Row() {
54                    Row()
55                      .width(40)
56                      .height(40)
57                      .backgroundColor('#a8a8a8')
58                      .margin({ right: 12 })
59                      .borderRadius(20)
60
61                    Column() {
62                      Text('Level-1 item')
63                        .fontSize(16)
64                        .lineHeight(21)
65                        .fontWeight(FontWeight.Medium)
66                      Text('Click to go to subitems')
67                        .fontSize(13)
68                        .lineHeight(21)
69                        .fontColor('#a8a8a8')
70                    }
71                    .alignItems(HorizontalAlign.Start)
72
73                    Blank()
74
75                    Row()
76                      .width(15)
77                      .height(15)
78                      .margin({ right: 12 })
79                      .border({
80                        width: { top: 2, right: 2 },
81                        color: 0xcccccc
82                      })
83                      .rotate({ angle: 45 })
84                  }
85                  .borderRadius(15)
86                  .shadow({ radius: 100, color: '#ededed' })
87                  .width('90%')
88                  .alignItems(VerticalAlign.Center)
89                  .padding({ left: 16, top: 12, bottom: 12 })
90                  .height(80)
91
92                  // Second component: navigation destination
93                  NavDestination() {
94                    // Content of the destination view, which is generally a custom component.
95                    Column() {
96                      Text("Destination"+ item +" content ")
97                        .fontSize(20)
98                        .fontColor(Color.Black)
99                        .textAlign(TextAlign.Center)
100                        .width('100%')
101                        .height('100%')
102                    }
103                    .width('100%')
104                    .height('100%')
105                    .backgroundColor(0xf5f5f5)
106                  }
107                  .title('Destination page') // Title of the level-2 page.
108                }
109              }
110              .width('100%')
111            }, (item:string):string => item)
112          }
113          .listDirection(Axis.Vertical)
114          .edgeEffect(EdgeEffect.Spring)
115          .sticky(StickyStyle.Header)
116          .chainAnimation(false)
117          .borderRadius(15)
118          .width('100%')
119          .height('100%')
120        }
121        .width('100%')
122        .mode(NavigationMode.Auto) // Set the display mode of the navigation bar to Auto.
123        .title('Navigation transition') // Set the title text.
124        .titleMode(NavigationTitleMode.Full) // Set the display mode of the page title bar.
125        .menus(this.NavigationMenus) // Set the title bar menu.
126      }
127      .width('100%')
128    }
129  }
130}
131```
132
133
134
135![en-us_image_0000001588458252](figures/en-us_image_0000001588458252.gif)
136