ふかしぎのReactさんぷるず

Fadeの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/02/21
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.4.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Fade } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Fade  = MaterialUI.Fade;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Fadeの各プロパティの解説

MUIでのFadeの扱い方の説明です。
フェードは透明、不透明をアニメーションで切り替える機能です。
このサンプルの「onf/off」を押してください。十字が透明化、不透明化します。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Fade in={onOff}>
        <TukuttaIcon />
      </Fade>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

children

Fadeのchildrenの使い方の説明です。
childrenに表示するノードを設定できます。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Fade in={onOff} children={<TukuttaIcon />}></Fade>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

addEndListener

FadeのaddEndListenerの使い方の説明です。
コラプスの終了後に付け加える関数を設定できます。
のはずですが実際にはコラプスのアニメーションが始まる前に実行されます。
このサンプルはaddEndListenerで「addEndListener実行」というウインドウを出します。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div>
      <Fade in={onOff} addEndListener={()=>{alert('addEndListener実行');}}>
        <TukuttaIcon />
      </Fade>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

appear

Fadeのappearの使い方の説明です。
inがtrueの時、つまり最初から表示している際にアニメーションをしてから表示するかの設定です。
inがtrueでappearもtrueだと最初にアニメーションをしてから表示します。
inがtrueでappearがfalseだとアニメーションなしでいきなり表示します。
デフォルトはtrueです。
サンプルの1つ目はtrueなのでこのページを開いた際にアニメーションで表示されます。
2つ目はfalseなのでいきなり表示されます。
この位置でCtrlキー+Rキーや、F5キーなどでブラウザーをリロードすると違いがわかります。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Fade in={true} appear={true}>
        <TukuttaIcon />
      </Fade>
      <Fade in={true} appear={false}>
        <TukuttaIcon />
      </Fade>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

easing

Fadeのeasingの使い方の説明です。
enterで表示する際の設定、exitで消える際の設定ができます。
未設定のデフォルトはcubic-bezier(0.4, 0, 0.2, 1)です。
この値はテーマから取得しています。theme.transitions.easing.easeInOutです。
サンプルの1つ目は未設定のデフォルト
サンプルの2つ目は未設定のデフォルトと同じ意味になります。
3つ目は表示する際に最初は遅く、そして最後の方は速くなります。消える際のexitは設定していないので1つ目の標準と同じタイミングで消えます。
4つ目は表示と非表示で最初は速く、そして最後の方で遅くなります。
違いを分かりやすくするためにtimeoutで長めの時間でアニメーションさせています。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div style={{"display":"flex"}}>
      <Fade in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} easing={{"enter":"cubic-bezier(0.4, 0, 0.2, 1)","exit":"cubic-bezier(0.4, 0, 0.2, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} easing={{"enter":"cubic-bezier(1, 0, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} easing={{"enter":"cubic-bezier(0, 1, 1, 1)","exit":"cubic-bezier(0, 1, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

in

Fadeのinの使い方の説明です。
表示するかしないかをブール値で設定します。
trueの場合は表示し、falseの場合は非表示です。
未設定のデフォルトはfalseです。
サンプルではFadeを3つ定義していますが、2つ目がfalse、3つ目は未設定なので結果として1つ目の1個しか表示されていません。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Fade in={true}>
        <TukuttaIcon/>
      </Fade>
      <Fade in={false}>
        <TukuttaIcon/>
      </Fade>
      <Fade>
        <TukuttaIcon/>
      </Fade>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

timeout

Fadeのtimeoutの使い方の説明です。
数値を設定するとその時間をかけて表示・非表示をします。数値はms(ミリ秒)です。1000ms=1秒です。
さらに細かく時間指定できます。
appearは画面で初めて表示する際の時間です。
enterは非表示から表示へ切り替える時間
exitは表示から非表示へ切り替える時間
数字だけの場合はappear、enter、exitを同じ数字にした設定になります。
未設定のデフォルトはテーマの値が設定されます。
enterはtheme.transitions.duration.enteringScreen(=225)
exitはtheme.transitions.duration.leavingScreen (=195)
サンプルの1つ目は1秒(1000ms)かけて表示・非表示します。
2つ目は1つ目と同じ意味になります。
3つ目は画面を初めて表示した際は1秒、表示する際には2秒、消える際には3秒かけてアニメーションします。
4つ目は画面を初めて表示した際は4秒、表示する際には5秒、消える際には6秒かけてアニメーションします。
5つ目は未設定のデフォルトです。
const Fade = MaterialUI.Fade;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div style={{"display":"flex"}}>
      <Fade in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} timeout={{"appear":1000,"enter":1000,"exit":1000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} timeout={{"appear":1000,"enter":2000,"exit":3000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff} timeout={{"appear":4000,"enter":5000,"exit":6000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Fade in={onOff}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

その他のアニメーション(Transitions)

コラプス(Collapse)、フェード(Fade)、ズーム(Zoom)、グロー(Grow)、スライド(Slide)の5つがあります。
コラプス(Collapse)は、その場で縦方向・横方向から現れます。
フェード(Fade)は、じょじょに透明度を変化しながら現れます。
ズーム(Slide)は、中心からサイズを変えながらじょじょに現れます。
グロー(Zoom)は、中心からサイズと透明度を変えながら現れる。(フェードとズームの組み合わせ)
スライド(Grow)は上・下・左・右から移動しながら現れます。
const Collapse = MaterialUI.Collapse;
const Fade = MaterialUI.Fade;
const Zoom = MaterialUI.Zoom;
const Grow = MaterialUI.Grow;
const Slide = MaterialUI.Slide;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
<div>
<div style={{"display":"grid","gridTemplateColumns":"repeat(5, 1fr)"}}>
      <Collapse in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Fade in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Zoom in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Zoom>
      <Grow in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Slide in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide>
      <div>コラプス(<a href="/react/mui/apiCollapse.php">Collapse</a>)</div>
      <div>フェード(<a href="/react/mui/apiFade.php">Fade</a>)</div>
      <div>ズーム(<a href="/react/mui/apiSlide.php">Slide</a>)</div>
      <div>グロー(<a href="/react/mui/apiZoom.php">Zoom</a>)</div>
      <div>スライド(<a href="/react/mui/apiGrow.php">Grow</a>)</div>
    </div>
    <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
</div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次