过渡

Bootstrap 包含一些通用的 CSS 过渡，可以应用于许多组件。React Bootstrap 将它们打包成几个可组合的 <Transition> 组件，来自 react-transition-group，一个常用的 React 动画包装器。

将动画封装到组件中，可以使它们更广泛地使用，并且可以移植到其他库中。所有可以进行动画的 React-bootstrap 组件都支持可插拔的 <Transition> 组件。

折叠

基本示例

为元素或组件添加折叠切换动画。

平滑动画

如果您发现动画卡顿，并且正在折叠的组件具有非零边距或填充，请尝试将 <Collapse> 的内容包装在一个没有边距或填充的节点中，例如下面的示例中的 <div>。这将允许正确计算高度，以便动画可以平滑进行。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Collapse from 'react-bootstrap/Collapse'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click </Button> <Collapse in={open}> <div id="example-collapse-text"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </Collapse> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Collapse from 'react-bootstrap/Collapse';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </Collapse>
    </>
  );
}

export default Example;

水平

为元素或组件添加折叠切换动画，以过渡宽度而不是高度。

平滑动画

如果您发现动画卡顿，并且正在折叠的组件具有非零边距或填充，请尝试将 <Collapse> 的内容包装在一个没有边距或填充的节点中，例如下面的示例中的 <div>。这将允许正确计算高度，以便动画可以平滑进行。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import Collapse from 'react-bootstrap/Collapse'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click </Button> <div style={{ minHeight: '150px' }}> <Collapse in={open} dimension="width"> <div id="example-collapse-text"> <Card body style={{ width: '400px' }}> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </Card> </div> </Collapse> </div> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Collapse from 'react-bootstrap/Collapse';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <div style={{ minHeight: '150px' }}>
        <Collapse in={open} dimension="width">
          <div id="example-collapse-text">
            <Card body style={{ width: '400px' }}>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Card>
          </div>
        </Collapse>
      </div>
    </>
  );
}

export default Example;

淡入淡出

为子元素或组件添加淡入淡出动画。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Fade from 'react-bootstrap/Fade'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-fade-text" aria-expanded={open} > Toggle text </Button> <Fade in={open}> <div id="example-fade-text"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </Fade> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Fade from 'react-bootstrap/Fade';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-fade-text"
        aria-expanded={open}
      >
        Toggle text
      </Button>
      <Fade in={open}>
        <div id="example-fade-text">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </Fade>
    </>
  );
}

export default Example;

API

折叠

淡入淡出