Material-UI AccordionのデフォルトのTransitionを無効化する

こんにちは。アルダグラムの松田です。

担当プロジェクトのフロントエンドでは、ReactのMaterial-UIを使用しています。
UI/UX向上のため、ライブラリのComponentを利用しつつ、適宜カスタマイズしてます。

本稿は、その取り組みの一環を記載したものです。

概要

Material-UIのAccordionでは、開閉時にデフォルトでcollapseのTransitionが適用されます。

https://mui.com/material-ui/react-accordion/
https://mui.com/material-ui/transitions/#collapse

しかし、他のTransitionを適用したり、展開時にローディング表示を実施する、などといったケースで、そのデフォルトの挙動が望ましくない場合もあります。

解決方法

AccordionのTransitionPropsのtimeoutを0に設定します。

これにより、Accordionが開閉する際のTransitionが即座に完了し、結果的にTransitionが無効化されます。

サンプルコード

import { useState } from 'react'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Button,
  Fade,
  Zoom
} from '@material-ui/core'

export const App = () => {
  const [expanded, setExpanded] = useState(false)

  return (
    <Accordion
      expanded={expanded}
      TransitionProps={{ timeout: 0 }} // Transitionのtimeoutを0にすることで即時開閉する
      style={{ height: 200 }}
    >
      <AccordionSummary style={{ background: '#eee', height: 100 }}>
        <Button onClick={() => setExpanded(!expanded)}>SUMMARY</Button>
      </AccordionSummary>
      <AccordionDetails style={{ background: '#ddd' }}>
        {/* 開閉時のTransitionが実質無効なため、Details内で別途Transitionを実行しても干渉しない */}
        <Fade in={expanded} timeout={1000}>
          <Box>detail item 1</Box>
        </Fade>
        <Zoom in={expanded} timeout={1000}>
          <Box>detail item 2</Box>
        </Zoom>
      </AccordionDetails>
    </Accordion>
  )
}

表示例

まとめ

Material-UIのAccordionのデフォルトのTransitionを無効化するには、TransitionPropsのtimeoutを0に設定する、という手法が簡単です。

無効化することで、開閉時に複雑なカスタマイズ表示を施しやすくなります。