teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

レスポンシブ希望を追記

2020/10/28 13:21

投稿

Akira_papa
Akira_papa

スコア3

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  上から下に徐々に開いていくQ&Aの部分を作成したいと思っています。JavaScriptでクラスの付け外しをしてCSSでアニメーションさせたいと思っています。
2
2
  JavaScriptは問題なく動作しています。ドロップダウンするアニメーション自体も出来ています。現状の問題点は以下の点です。
3
3
  ・開閉した際に、パディングもアニメーションしてしまい、テキストの位置が左右でアニメーションしてしまう。
4
- テキストが徐々に改行されていくような状況です。今はスマホ用のページを作っているので、画面幅が狭く、特に目立ちます。
4
+ テキストが徐々に改行されていくような状況です。今はスマホ用のページを作っている(最終的にはレスポンシブ対応にしたい)ので、画面幅が狭く、特に目立ちます。
5
5
 
6
6
  こちらを解消しようと、パディングをアニメーションしないようにすると、閉じるときにパディングが一気に消えておかしい。
7
7
  最初からパディングをつけておくと、2つの質問事項の間に余計な余白ができてしまう。

1

パディングはつけたままにしたいことを追記

2020/10/28 13:21

投稿

Akira_papa
Akira_papa

スコア3

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,11 @@
1
1
  上から下に徐々に開いていくQ&Aの部分を作成したいと思っています。JavaScriptでクラスの付け外しをしてCSSでアニメーションさせたいと思っています。
2
2
  JavaScriptは問題なく動作しています。ドロップダウンするアニメーション自体も出来ています。現状の問題点は以下の点です。
3
3
  ・開閉した際に、パディングもアニメーションしてしまい、テキストの位置が左右でアニメーションしてしまう。
4
- テキストが徐々に改行されていくような状況です。
4
+ テキストが徐々に改行されていくような状況です。今はスマホ用のページを作っているので、画面幅が狭く、特に目立ちます。
5
5
 
6
6
  こちらを解消しようと、パディングをアニメーションしないようにすると、閉じるときにパディングが一気に消えておかしい。
7
7
  最初からパディングをつけておくと、2つの質問事項の間に余計な余白ができてしまう。
8
+ 見た目の調整でパディングはつけておきたいですが、パディング以外の方法で代用できるならそれでも構いません。
8
9
 
9
10
  なにか良い解決方法がありましたらご教授いただけると幸いです。
10
11
  よろしくお願いいたします。