Q&A
やりたいこと
ボタンを押すとmaterial-uiのカードを左にスライドさせる。
そして、次のカードが表示。
教えてほしいこと
クリックイベントを受け取ってreactでのトランジションの方法。
(cssトランジションを使うのか)
jsx
1~~~~ 2<Card className={classes.card}> 3 <CardMedia 4 className={classes.media} 5 image={logo} 6 style={{width : 300, height : 350}}/> 7 <CardContent> 8 Hello, Material-UI in React :) 9 </CardContent> 10</Card> 11<div> 12<Button onClick={this.handleClick} variant="contained" component="span" className={classes.button}> 13 button 14</Button> 15~~~~~
回答1件
0
ベストアンサー
（※調べながら回答したので、追記が多くなってしまいましたが、最後の **追記4 ** で、 <Card /> をカルーセルにしてみたサンプルを作りましたので、まずはそちらからご覧いただく方がよいかもしれません。）
こんにちは。
過去にMaterial UI(以下、"mui" と略）を多用したSPAのフロント開発を経験しましたが、 mui 便利ですよね。ただ、mui のドキュメントにあるサンプルコードを持ってくればほぼ事足りるうちは開発が捗りますが、デモにはないちょっと凝ったことをやろうとすると壁にぶち当たることは、ままありました。ご質問で実現されたいことも、この「ドキュメントには載ってない、ちょっと凝ったこと」に相当するのかなという印象です。
以下は、具体的なサンプルコードを作ってスパイクしたわけではなく、「これを使えば出来るのでは？」というレベルの参考情報になります。つまり、自分がもし、複数の <Card />を使ってカルーセル的なものを作るなら、どういうアプローチを考えるか、の回答になります。（なので、すみませんが、コードは掲示しません。）
選択肢として、大きくは２方向あります。
(1)muiに Slide というコンポーネントがあるので、これを使ってみることを考えます。ただ、これを使いこなすには、ベースとなっている、react-transition-group を理解する必要がありそうで、さらにそのためには、CSS のtransition プロパティによるアニメーション効果の原理を把握する必要がありそうです。
(2) 複数の<img /> や <div /> をカルーセルにしてくれるReactコンポーネントを探してこれを使ってみる。
???? react-slick や、 nuka-carousel , react-responsive-carouselといったものがあります。
業務の限られた時間の中で、とりあえずそれらしく動くものを作らなければならないという差し迫った状況だと、(1)または(2)のどちらを選ぶ方が確実かという判断は個人差のあるところですが、私なら(2)からやってみると思います。ただしこの判断は
(1)だと、スライド１枚の表示、非表示がスライド風にうまくできたとしても、カルーセルにするには、次に ”複数枚の Card を水平方向に並べ見えているのは１枚だけにする” といったような CSSを書く必要があるのでは？ しかも、それをCardなり、Cardを囲むコンポーネントにうまく当てるというハードルもある。これらをクリアできるだろうか？ ここら辺りがボトルネックになりそう・・・
という個人的な所感に基づくものなので、dsakkさんが、「そこは簡単に出来る」という感触でしたら、(1)の方向で掘っていくのもアリかもしれません。
(2) だと、作業としては、「これを使ってみよう」と決めたカルーセルのドキュメントに、おそらく単なる <img /> や<div /> のリストをスライドとして動かすサンプルがあったりするので、これを複数の<Card />を囲むものに変えて動かしてみるというスパイクからですかね。多分、なんとなくそれらしく動くけれども、微妙にレイアウトが崩れる、みたいなことが起きそうですが、そこは対処療法的なスタイルを泥臭く当てて切り抜けることを考えます。
時間が許すのであれば、まず(1)の方向で進めて、そもそもの原理から押さえた上で、もう一度、どこかで(1)or(2)を判断するタイミングを設けるのがよいかと思います。原理を押さえたからこそ(2)を選ぶという判断に確信が持てる、ということもありそうです。
以上参考になれば幸いです。
追記1
material-ui のレポジトリの issue に以下がありました。
上記はユーザーからの enhancementの要望と思われますが、このissueの最後に、material-ui のcontributorの方から以下のコメントがあります。
上記の中で、
「カルーセルに関しては、（現時点では） material-ui ではない他のコンポーネントを探してください。もしカルーセルをMaterial UI を使って作る試みをしてくれるのであれば、related-projects からのリンクを追加しますよ。」
という趣旨のことを言っていますね。
追記2
上記のcontributorさんのコメントは2016年6月のものでちょっと古いです。なので新しめのissueを探したところ、以下がありました。
上記に対する回答
https://github.com/mui-org/material-ui/issues/14026#issuecomment-450450461
joshwooding commented 6 days ago
This is already possible :) https://codesandbox.io/s/yv9rk4ow7v
にあるリンク先のcodesandboxに、react-swipeable-views を使った、縦方向のカルーセルのサンプルコードがあります。このサンプルでは <div />を縦にスライドさせていますが、これを <Card /> を対象にして、水平方向のスライドに設定を変えてみるとうまくいくかもしれません。
追記3
何度も追記、すみません。
Steppersのサンプルの中に、横にスライドさせる以下のサンプルを見つけました。
上記サンプルのソース で、動かす対象を <Card /> にしてみるとよいかもしれません。
追記4
上記の 追記3 に記載したサンプル、mobile-stepper-text-with-carousel-effect のコードを修正して、<AutoPlaySwipeableViews /> でスライドさせる対象を <Card /> にしてみるサンプルを作成してみました。
以下のレポジトリに上げましたので、参考にして頂ければと思います。
上記を yarn start してブラウザ上に表示させ、スライドさせた様子の動画が以下です。
特にハマるところもなく、うまくいったので、<Card /> のカルーセル化には、react-swipeable-views の <SwipeableViews /> を使うと良さそうです。
投稿2019/01/03 13:08
編集2019/01/06 06:27
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/01/05 12:59
2019/01/05 13:13