前提
Reactで要素の表示・非表示にアニメーションを付けています。
下記は動作サンプルです。
サンプル
使用しているライブラリ
React Spring
アニメーションに使用しています。
上記のサンプルはReact Spring公式サイトのuseTransitionのページのサンプルを参考に作りました。
公式サイトの接続が不安定なので、githubのページも貼っておきます。
react-spring/react-spring: ✌️ A spring physics based React animation library
ソースコード
jsx
1export default function App() { 2 const [toggle, setToggle] = useState(false); 3 const transition = useTransition(toggle, { 4 from: { opacity: 0 }, 5 enter: { opacity: 1 }, 6 leave: { opacity: 0 } 7 }); 8 9 return ( 10 <> 11 <button onClick={() => setToggle(!toggle)}>表示切替</button> 12 {transition( 13 (props, item) => 14 item && ( 15 <animated.div style={props}> 16 <div style={block} /> 17 </animated.div> 18 ) 19 )} 20 </> 21 ); 22} 23 24const block = { 25 background: "red", 26 height: "300px" 27};
分からない点
return頭の
jsx
1{transition( 2 (props, item) => 3 item && ( 4 <animated.div style={props}>
が何をやっているのかがよく分かりません。
具体的に分からない点を下記に記載します。
分からない点1
transition変数にはuseTransition関数を実行した結果が代入されているかと思いますが、それを踏まえるとtransition(...)のように関数を呼び出す書き方でなぜエラーが出ないのでしょうか。
例えば、
javascript
1const useTransition = (x, y) => { 2 console.log(x * y); 3}; 4const transition = useTransition(3, 2); 5 6transition();
と書くと
transitions is not a function
というエラーメッセージが出ます。
javascript
1const transition = useTransition; 2 3transition();
上記のようにtransitionにuseTransition関数そのものを代入すれば、transition()が有効になります。
分からない点2
jsx
1{transition( 2 (props, item) => 3 item && ( 4 <animated.div style={props}>
transitionが関数だとすると、二つの引数を必要とする無名関数を引数にtransition関数を呼び出しているかと思いますが、この無名関数が必要とする二つの引数はどこから渡されているのでしょうか。
分かりやすくするために無名関数に名前を付け、関数の中身を変えて考えてみたのですが、
javascript
1const mumei = (props, item) => { 2 return props + item; 3}; 4 5const transition = x => { 6 console.log(x); 7}; 8 9transition(mumei());
これだと具体的な数値を渡していないため、結果はundefinedになります。
transition(mumei(2,2))のように、mumei関数呼び出し時に数値を二つ与えれば結果が出ます。
挙動から見れば、無名関数の必要とする二つの引数の内、propsがtransition変数でitemが<animated.div>タブ以下のアニメーションを適用する要素かと思いますが、この項で述べた通り挙動とロジックの繋がりが理解できません。
分からない点3
jsx
1{transition( 2 (props, item) => 3 item && ( 4 <animated.div style={props}>
上記の
item &&
はどういった意味の記述なのでしょうか。
条件付きレンダーで
jsx
1{ state && <div /> }
のようにbooleanの判定で&&を記述することはありますが、上記における&&の意味合いが分かりません。
以上になります。
挙動は上手く行っているので、これまで挙げた私の例え及び考え方や認識に誤りや足りない部分があるかと思います。
ですのでよろしければ正しい例えや理論をご教示いただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/25 00:51