Uniapp settings page Jump effect - navigateto switching effect - Global animationtype animation

effect

before ： Click the jump , The page slides from the right side of the screen to the screen

Now? ： Sure Custom page Jump effect , for example

1）pop-in/pop-out The new form enters from the left , And the old window is squeezed out

2）fade-in/fade-out The new form displays gradually from transparent to opaque

3） slide-in-bottom/slide-out-bottom The new form enters from the bottom

The official manual + Different effect configuration parameters

Window animation - uni.navigateTo(OBJECT) | uni-app Official website https://uniapp.dcloud.io/api/router.html#animation

Show animation	Turn off animation	Show animation description （ Turning off animation is the opposite ）
slide-in-right	slide-out-right	The new form enters from the right
slide-in-left	slide-out-left	The new form enters from the left
slide-in-top	slide-out-top	The new form enters from the top
slide-in-bottom	slide-out-bottom	The new form enters from the bottom
pop-in	pop-out	The new form enters from the left , And the old window is squeezed out
fade-in	fade-out	The new form displays gradually from transparent to opaque
zoom-out	zoom-in	The new form zooms from small to large
zoom-fade-out	zoom-fade-in	The new form enlarges gradually from small to large and displays gradually from transparent to opaque
none	none	No animation

Implementation code

Method 1： The global settings window displays 、 Turn off animation

modify /pages.json

stay "globalStyle"."app-plus" in , add to ：

            "animationType": "fade-in",
            "animationDuration": 50

Method 2： Single page setup

modify /pages.json

stay "pages" On one of the pages of , add to ：

          "animationType": "fade-in",
            "animationDuration": 50

 

Method 3： A jump effect of a single page

stay /pages/xx/xx.vue in ,

 

recommend

Baidu home page without advertising baidu.rudon.cn

cover