回答編集履歴
1
追記
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
**案1**
|
|
2
|
+
|
|
1
3
|
現在のHTML/CSS構成で一番簡単なのは下記です。（元のCSSを使用）
|
|
2
4
|
ただし、一瞬出てしまうデメリットがあります。
|
|
3
5
|
```js
|
|
@@ -9,6 +11,7 @@
|
|
|
9
11
|
});
|
|
10
12
|
});
|
|
11
13
|
```
|
|
14
|
+
**案2**
|
|
12
15
|
|
|
13
16
|
```試したこと```のCSSを活かして、
|
|
14
17
|
HTMLを変えない場合は、やや強引ですが下記で行けます。（試したことのCSSを使用）
|
|
@@ -24,3 +27,7 @@
|
|
|
24
27
|
|
|
25
28
|
ただし、前後、特に後ろにどんな要素があるか質問文からはわかりませんので、
|
|
26
29
|
場合によってはアニメーション後の挙動が一瞬少しおかしくなるかもしれません。
|
|
30
|
+
|
|
31
|
+
案1も2も不採用の場合、
|
|
32
|
+
そもそも該当HTML要素が```display: flex```ではなく、
|
|
33
|
+
```display: block```になるように工夫してみてください。
|