###前提・実現したいこと
お世話になります、現在htmlファイルにjavaScriptで書いたチャット機能を追加中です
フレームワークはReact
ルーティングにReact-Router(v4)
スタイルシートにaphroditeを利用しています
Reactを触ってまだ数日でしてやっとルーティングが使えるようになりました。
チャット部分ではページ右下に棒を書いてクリックすると伸びる機能を実現しようとしています。
css
1/* 元の状態 */ 2.chat_bar { 3 //右下に配置 4 position: fixed; 5 bottom: 0; 6 right: 0; 7 //角が少し曲がった横長の黒棒 8 height: 14px; 9 width: 360px; 10 background-color: rgba(0, 0, 0, 0.9); 11 border-radius: 5px; 12 transition: 1s; 13 }
フレームワークなしのjavaScriptでは機能を実現できました。
js
1bar.addEventListener('click', function (e) { 2 //すべて表示された状態の場合にはイベントを停止 3 if (this.style.height === '180px') { 4 return false; 5 } 6 //スタイル変化 7 this.style.height = '180px'; 8 this.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; 9 //this要素内にInput要素やbutton要素を追加する 10 }, false); 11
上記はデモで作ったのでとりあえずDOM要素のstyleを利用してアニメーションを再現しています。
この状態をReactで再現しようとしてもできません
ReactでElement.styleを設定してもaphroditeで設定されたスタイルにはすべて
!importantが付加されていて作業が困難になっています。
css
1.bar_1v7fkn1 { 2 position: fixed !important; 3 bottom: 0 !important; 4 right: 0 !important; 5 height: 14px !important; 6 width: 360px !important; 7 background-color: rgba(0,0,0,0.9) !important; 8 border-radius: 5px !important; 9 -webkit-transition: 1s !important; 10 -moz-transition: 1s !important; 11 transition: 1s !important; 12}
###一番聞きたかったこと
- そもそもReactでアニメーションって向いていないんでしょうか
CSSTransitionGroupなどライブラリやAPIもいくつか実装されているみたいですが
結局DOMを利用しなきゃいけなかったり、学習コストが重なったり...リンク
やむなしにjQueryを利用したほうが良いんでしょうか?ご回答お願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。