mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
304b36a5bf
* chore: bump rc-tabs * refactor: use internal motion * test: Update snapshot * chore: clean up * test: Update snapshot * test: coverage * test: resolve conflict
80 lines
1.5 KiB
Markdown
80 lines
1.5 KiB
Markdown
---
|
|
order: 99
|
|
title:
|
|
zh-CN: 动画
|
|
en-US: Animated
|
|
debug: true
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
动画切换。
|
|
|
|
## en-US
|
|
|
|
Animated of Tab Pane.
|
|
|
|
```tsx
|
|
import { Tabs, Switch, Space } from 'antd';
|
|
import React from 'react';
|
|
|
|
const App: React.FC = () => {
|
|
const [inkBar, setInkBar] = React.useState(true);
|
|
const [tabPane, setTabPane] = React.useState(true);
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Switch
|
|
checkedChildren="inkBar"
|
|
unCheckedChildren="inkBar"
|
|
checked={inkBar}
|
|
onChange={() => setInkBar(!inkBar)}
|
|
/>
|
|
<Switch
|
|
checkedChildren="tabPane"
|
|
unCheckedChildren="tabPane"
|
|
checked={tabPane}
|
|
onChange={() => setTabPane(!tabPane)}
|
|
/>
|
|
</Space>
|
|
|
|
<Tabs
|
|
animated={{ inkBar, tabPane }}
|
|
items={[
|
|
{
|
|
label: `Bamboo`,
|
|
key: '1',
|
|
children: `Hello Bamboo!`,
|
|
style: {
|
|
height: 200,
|
|
boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
{
|
|
label: `Little`,
|
|
key: '2',
|
|
children: `Hi Little!`,
|
|
style: {
|
|
height: 300,
|
|
boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',
|
|
},
|
|
},
|
|
{
|
|
label: `Light`,
|
|
key: '3',
|
|
children: `Welcome Light!`,
|
|
style: {
|
|
height: 100,
|
|
boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|