質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

315閲覧

React.jsでアニメーション

nobodytolove123

総合スコア61

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/12/15 07:37

###前提・実現したいこと
お世話になります、現在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を利用したほうが良いんでしょうか?ご回答お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

最初から開いた状態で実装を進めます。

投稿2017/12/15 07:42

nobodytolove123

総合スコア61

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問