doc: add reduce motion guide

config/menus.tsx

@@ -54,6 +54,10 @@ export const menus = {
       title: 'SSR (Experimental)',
       path: '/guide/ssr',
     },
+    {
+      title: 'Reduce Motion (Experimental)',
+      path: '/guide/reduce-motion',
+    },
   ],
   '/zh/guide': [
     {
@@ -96,6 +100,10 @@ export const menus = {
       title: '服务端渲染 / SSR（试验性）',
       path: '/zh/guide/ssr',
     },
+    {
+      title: '减弱动效（试验性）',
+      path: '/zh/guide/reduce-motion',
+    },
   ],
   '/components': [
     {

docs/guide/reduce-motion.en.md

@@ -0,0 +1,46 @@
+# Reduce Motion <Experimental></Experimental>
+
+In some scenarios, you may not want various complex animation effects on the interface, so you can control the animation effects of components through the `reduceMotion` and `restoreMotion` functions provided by antd-mobile.
+
+When you call `reduceMotion()`, the antd-mobile component will skip the animation as much as possible.
+
+```jsx
+import { reduceMotion } from 'antd-mobile'
+
+reduceMotion()
+```
+
+It should be noted that `reduceMotion()` will only control the components provided by antd-mobile, and will not affect your own components in your business project.
+
+When you want to restore the animation effect, you can call `restoreMotion()`.
+
+## Demos
+
+<code src="../../src/utils/demos/reduce-motion/demo1.tsx"></code>
+
+<code src="../../src/utils/demos/reduce-motion/demo2.tsx"></code>
+
+## Follow System Settings
+
+In some cases, you may want the animation compatibility to follow the system settings directly, such as the "Accessibility - Compatible Motion Effects" setting under iOS:
+
+<img alt="reduce-motion-en" src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*MiDURJ7_vAwAAAAAAAAAAAAAARQnAQ" width="500px" />
+
+Then you can use it with [react-reduce-motion](https://github.com/infiniteluuke/react-reduce-motion):
+
+```jsx
+import { useReducedMotion } from 'react-reduce-motion'
+import { reduceMotion, restoreMotion } from 'antd-mobile'
+
+const MyApp = () => {
+  const prefersReducedMotion = useReducedMotion()
+  React.useEffect(() => {
+    if (prefersReducedMotion) {
+      reduceMotion()
+    } else {
+      restoreMotion()
+    }
+  }, [prefersReducedMotion])
+  // ...
+}
+```

docs/guide/reduce-motion.zh.md

@@ -0,0 +1,46 @@
+# 减弱动效 <Experimental></Experimental>
+
+在一些场景下，你可能并不希望界面上存在各种复杂的动画效果，那么可以通过 antd-mobile 提供的 `reduceMotion` 和 `restoreMotion` 函数，来控制组件的动画效果。
+
+当你调用 `reduceMotion()` 之后，antd-mobile 的组件会尽可能的跳过动画效果。
+
+```jsx
+import { reduceMotion } from 'antd-mobile'
+
+reduceMotion()
+```
+
+需要注意的是，`reduceMotion()` 只会控制 antd-mobile 提供的组件，不会影响你业务项目中自己的组件。
+
+当你希望恢复动画效果时，可以调用 `restoreMotion()`。
+
+## 示例
+
+<code src="../../src/utils/demos/reduce-motion/demo1.tsx"></code>
+
+<code src="../../src/utils/demos/reduce-motion/demo2.tsx"></code>
+
+## 跟随系统设置
+
+一些情况下，你可能会希望动画是否兼容直接跟随系统设置，例如 iOS 下的 "辅助功能 - 兼容动态效果" 设置：
+
+<img alt="reduce-motion-zh" src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*LVkBSrQkji4AAAAAAAAAAAAAARQnAQ" width="500px" />
+
+那么可以配合 [react-reduce-motion](https://github.com/infiniteluke/react-reduce-motion) 使用：
+
+```jsx
+import { useReducedMotion } from 'react-reduce-motion'
+import { reduceMotion, restoreMotion } from 'antd-mobile'
+
+const MyApp = () => {
+  const prefersReducedMotion = useReducedMotion()
+  React.useEffect(() => {
+    if (prefersReducedMotion) {
+      reduceMotion()
+    } else {
+      restoreMotion()
+    }
+  }, [prefersReducedMotion])
+  // ...
+}
+```

src/utils/demos/reduce-motion/demo1.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react'
+import { Collapse, reduceMotion } from 'antd-mobile'
+import { DemoBlock, lorem } from 'demos'
+
+export default () => {
+  useEffect(() => {
+    reduceMotion()
+  }, [])
+  return (
+    <DemoBlock title='减弱动效之后' padding='0'>
+      <Collapse defaultActiveKey={['1']}>
+        <Collapse.Panel key='1' title='第一项'>
+          {mockContents[0]}
+        </Collapse.Panel>
+        <Collapse.Panel key='2' title='第二项'>
+          {mockContents[1]}
+        </Collapse.Panel>
+        <Collapse.Panel key='3' title='第三项'>
+          {mockContents[2]}
+        </Collapse.Panel>
+      </Collapse>
+    </DemoBlock>
+  )
+}
+
+const mockContents = Array(5)
+  .fill(null)
+  .map(() => lorem.generateParagraphs(1))

src/utils/demos/reduce-motion/demo2.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Collapse } from 'antd-mobile'
+import { DemoBlock, lorem } from 'demos'
+
+export default () => {
+  return (
+    <DemoBlock title='正常组件' padding='0'>
+      <Collapse defaultActiveKey={['1']}>
+        <Collapse.Panel key='1' title='第一项'>
+          {mockContents[0]}
+        </Collapse.Panel>
+        <Collapse.Panel key='2' title='第二项'>
+          {mockContents[1]}
+        </Collapse.Panel>
+        <Collapse.Panel key='3' title='第三项'>
+          {mockContents[2]}
+        </Collapse.Panel>
+      </Collapse>
+    </DemoBlock>
+  )
+}
+
+const mockContents = Array(5)
+  .fill(null)
+  .map(() => lorem.generateParagraphs(1))