トランジション

Bootstrapには、多くのコンポーネントに適用できるいくつかの汎用的なCSSトランジションが含まれています。React Bootstrapでは、Reactで一般的に使用されるアニメーションラッパーであるreact-transition-groupから、いくつかの合成可能な<Transition>コンポーネントにそれらをバンドルしています。

アニメーションをコンポーネントにカプセル化することで、より広く利用できるようになるだけでなく、他のライブラリでも移植して使用できるという利点があります。アニメーション可能なすべてのReact-bootstrapコンポーネントは、プラグ可能な<Transition>コンポーネントをサポートしています。

折りたたみ

基本例

要素またはコンポーネントに折りたたみ切り替えアニメーションを追加します。

スムーズなアニメーション

アニメーションがぎこちなく見え、折りたたまれているコンポーネントにゼロ以外のマージンまたはパディングがある場合は、以下の例のように、マージンまたはパディングのないノード（<div>など）の中に<Collapse>の内容をラップしてみてください。これにより、高さを正しく計算できるようになり、アニメーションがスムーズに実行されます。

結果

読み込み中…

ライブエディタ

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;

水平方向

高さの代わりに幅をトランジションさせるために、要素またはコンポーネントに折りたたみ切り替えアニメーションを追加します。

スムーズなアニメーション

アニメーションがぎこちなく見え、折りたたまれているコンポーネントにゼロ以外のマージンまたはパディングがある場合は、以下の例のように、マージンまたはパディングのないノード（<div>など）の中に<Collapse>の内容をラップしてみてください。これにより、高さを正しく計算できるようになり、アニメーションがスムーズに実行されます。

結果

読み込み中…

ライブエディタ

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

折りたたみ

フェード