Mount-Animation-React

• When element is unmounted, that element performs an event and then disappears.
• There are 3 conditions for an element to disappear.
  • js setTimeout : Set duration millisecond for fade out.
  • css animation : Set ref on fade-out animation element.
  • css transition : Set ref on fade-out transition element.
• There are 3 case in keys of param. The value of the key is freely available but used same structure.
  • init : If element need initial state, use init param will run open param 50 millisecond after it is run ( NotRequired).
  • open : If init param is not exist, element mounted as open param.
  • close : When element unmount, used close param.

---

Used CSS animation

1@keyframes fadeIn {
2  from {
3    opacity: 0
4  }
5  to {
6    opacity: 1
7  }
8}
9
10@keyframes fadeOut {
11  from {
12    opacity: 1
13  }
14  to {
15    opacity: 0
16  }
17}
18
19.fade-in {
20  animation: fadeIn 0.5s forwards
21}
22
23.fade-out {
24  animation: fadeOut 0.5s forwards
25}

1const [mount, setMount] = useState(false)
2
3const params = {
4  open: {
5    className: 'fade-in'
6  },
7  close: {
8    className: 'fade-out'
9  }
10}
11
12const click = (state: MountStateType) => {
13  if (state === 'open') setMount(false)
14}
15
16return (
17  <>
18    <button onClick={() => setMount(true)}>open</button>
19    <MountAnimation mount={mount} params={params}>
20      {({state, ref, className}) => (
21        <button ref={ref} className={className} onClick={() => click(state)}>close</button>
22      )}
23    </MountAnimation>
24  </>
25)

---

Used CSS transition

1import MountAnimation, {MountStateType} from "mount-animate-react/lib/MountAnimation"
2import {useState} from "react"
3
4const App = () => {
5  const [mount, setMount] = useState(false)
6
7  const params = {
8    init: {
9      style: {opacity: 0}
10    },
11    open: {
12      style: {opacity: 1}
13    },
14    close: {
15      style: {opacity: 0}
16    }
17  }
18
19  const click = (state: MountStateType) => {
20    if (state === 'open') setMount(false)
21  }
22
23  return (
24    <>
25      <button onClick={() => setMount(true)}>open</button>
26      <MountAnimation mount={mount} params={params} duration={1000}>
27        {({state, ref, style}) => (
28          <button ref={ref} style={{transition: '0.5s', ...style}} onClick={() => click(state)}>close</button>
29        )}
30      </MountAnimation>
31    </>
32  )
33}

---

Used Time duration

1import MountAnimation, {MountStateType} from "mount-animate-react/lib/MountAnimation"
2import {useState} from "react"
3
4const App = () => {
5  const [mount, setMount] = useState(false)
6
7  const params = {
8    open: {
9      className: 'open'
10    },
11    close: {
12      className: 'close'
13    }
14  }
15
16  const click = (state: MountStateType) => {
17    if (state === 'open') setMount(false)
18  }
19
20  return (
21    <>
22      <button onClick={() => setMount(true)}>open</button>
23      <MountAnimation mount={mount} params={params} duration={1000}>
24        {({state, className}) => (
25          <button className={className} onClick={() => click(state)}>close</button>
26        )}
27      </MountAnimation>
28    </>
29  )
30}

---

If multiple element used animation

1import MountAnimation, {MountStateType} from "mount-animate-react/lib/MountAnimation"
2import {useState} from "react"
3
4const App = () => {
5  const [mount, setMount] = useState(false)
6
7  const params = {
8    init: {
9      bg: {
10        style: {opacity: 0}
11      },
12      btn: {
13        style: {opacity: 0}
14      },
15    },
16    open: {
17      bg: {
18        style: {opacity: 0.3}
19      },
20      btn: {
21        style: {opacity: 1}
22      },
23    },
24    close: {
25      bg: {
26        style: {opacity: 0}
27      },
28      btn: {
29        style: {opacity: 0}
30      },
31    }
32  }
33
34  const click = (state: MountStateType) => {
35    if (state === 'open') setMount(false)
36  }
37
38  return (
39    <>
40      <button onClick={() => setMount(true)}>open</button>
41      <MountAnimation mount={mount} params={params}>
42        {({
43            state,
44            ref,
45            bg: {style: bgStyle},
46            btn: {style: btnStyle}
47          }) => {
48          return (
49            <>
50              <div style={{
51                transition: '0.5s',
52                position: 'fixed',
53                zIndex: 10,
54                top: 0,
55                left: 0,
56                height: '100%',
57                width: '100%',
58                background: 'gray',
59                ...bgStyle
60              }}>
61              </div>
62              <button ref={ref} style={{
63                transition: '0.5s',
64                position: 'fixed',
65                zIndex: 20,
66                ...btnStyle
67              }} onClick={() => click(state)}>close
68              </button>
69            </>
70          );
71        }}
72      </MountAnimation>
73    </>
74  )
75}