Q&Ahttps://codepen.io/Saomocari/pen/rVjvvg
Reactで上記のようなアニメーションをする場合、どうしたらいいのでしょうか？
仕様としてはチェックボックスが数種類あり、その値によってJSONを元にDOMを生成しております。
**■stateとmethod
**
react
1 constructor(props) { 2 super(props); 3 this.state = { 4 location: 'front-end-engineer' 5 }; 6 } 7 8 getDataLocation(e) { 9 this.setState({ 10 location: e.currentTarget.dataset.location, 11 }); 12 } 13
■チェックボックス部分
react
1 <ul className="list"> 2 <li className="list__item"> 3 <span className="radio"> 4 <label> 5 <input 6 type="radio" 7 name="radio" 8 defaultChecked 9 data-location="front-end-engineer" 10 onClick={e => this.getDataLocation(e)} 11 /> 12 <span className="radio__label"> 13 フロントエンドエンジニア 14 </span> 15 </label> 16 </span> 17 </li> 18 <li className="list__item"> 19 <span className="radio"> 20 <label> 21 <input 22 type="radio" 23 name="radio" 24 data-location="designer" 25 onClick={e => this.getDataLocation(e)} 26 /> 27 <span className="radio__label">デザイナー</span> 28 </label> 29 </span> 30 </li> 31 <li className="list__item"> 32 <span className="radio"> 33 <label> 34 <input 35 type="radio" 36 name="radio" 37 data-location="writer" 38 onClick={e => this.getDataLocation(e)} 39 /> 40 <span className="radio__label">編集・ライター</span> 41 </label> 42 </span> 43 </li> 44 <li className="list__item"> 45 <span className="radio"> 46 <label> 47 <input 48 type="radio" 49 name="radio" 50 data-location="photographer" 51 onClick={e => this.getDataLocation(e)} 52 /> 53 <span className="radio__label">フォトグラファー</span> 54 </label> 55 </span> 56 </li> 57 <li className="list__item"> 58 <span className="radio"> 59 <label> 60 <input 61 type="radio" 62 name="radio" 63 data-location="human-resources" 64 onClick={e => this.getDataLocation(e)} 65 /> 66 <span className="radio__label">人事</span> 67 </label> 68 </span> 69 </li> 70 <li className="list__item"> 71 <span className="radio"> 72 <label> 73 <input 74 type="radio" 75 name="radio" 76 data-location="marketing" 77 onClick={e => this.getDataLocation(e)} 78 /> 79 <span className="radio__label">マーケティング</span> 80 </label> 81 </span> 82 </li> 83 </ul>
■メインコンテンツ部分
react
1 <ul className="user-list"> 2 {Object.keys(userListJson[location]).map((item, index) => { 3 return ( 4 <li 5 className="user-list__item" 6 key={index} 7 style={{"transitionDelay": (index * 0.5) + "s"}} 8 > 9 <div className="user-list__item-head"> 10 <p className="icon"> 11 <img 12 src="https://source.unsplash.com/collection/9013786/50x50" 13 alt="" 14 /> 15 </p> 16 <div className="privacy"> 17 <p className="name"> 18 {userListJson[location][item]['name']} 19 </p> 20 <div className="identity"> 21 <p className="age"> 22 <span>{userListJson[location][item]['age']}</span> 23 </p> 24 <span className="diagonal-line">/</span> 25 <p className="job"> 26 {userListJson[location][item]['job']} 27 </p> 28 </div> 29 </div> 30 </div> 31 <div className="user-list__item-body"> 32 <div className="conditions"> 33 <p className="week"> 34 <span>{userListJson[location][item]['week']}</span> 35 </p> 36 <p className="wage"> 37 <span>{userListJson[location][item]['wage']}</span>円 38 </p> 39 </div> 40 </div> 41 </li> 42 ); 43 })} 44 </ul>
回答2件
0
React かどうかはほぼ関係なく、CSSのアニメーションを付けるというやり方でいいと思います。
今回ですと、mapの一番外側のタグが<li>タグなので、そこにクラス名を付けることでできるかと思います。
Reactのmapを使った時のレンダリングについてですが、
mapを使っていても最終的な表示はそれを並べたhtmlが出力されているだけです。
したがって、クラス名を付ける位置さえ間違わなければmapを使っているかどうかと関係なく、CSS通りの動作をするかと思います。
投稿2019/12/05 09:12
総合スコア544
0
自己解決
ひとまずforで回してsetTimeoutを使用する事にしました。
React
1 const listItem = document.querySelectorAll('.user-list__item'); 2 3 this.setState({ 4 location: e.currentTarget.dataset.location, 5 }); 6 7 for (let i = 0; i < listItem.length; i++) { 8 listItem[i].classList.remove('is-show'); 9 setTimeout(function() { 10 listItem[i].classList.add('is-show'); 11 }, i * 100); 12 } 13 }
投稿2019/12/06 01:37
総合スコア23
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/06 01:39