回答編集履歴
1
slideToggle() の対処
test
CHANGED
|
@@ -8,4 +8,31 @@
|
|
|
8
8
|
|
|
9
9
|
`slideToggle()` の置き換えはシンプルではないので、時間があれば後で追記します。
|
|
10
10
|
|
|
11
|
+
----
|
|
11
12
|
|
|
13
|
+
`slideToggle()` は jQuery でも数百行のコードで実現しているぐらい面倒な処理です。限られた場面だけの対応(margin/border/padding なしなど)でよいなら、以下のようなコードで実現できます。
|
|
14
|
+
```js
|
|
15
|
+
async function slideToggle(e, duration) {
|
|
16
|
+
const display = getComputedStyle(e).display;
|
|
17
|
+
if (display == 'none') {
|
|
18
|
+
e.style.display = '';
|
|
19
|
+
e.style.overflow = 'hidden';
|
|
20
|
+
let targetHeight = e.scrollHeight;
|
|
21
|
+
let a = e.animate([{height:'0px'}, {height:targetHeight+'px'}], duration);
|
|
22
|
+
a.play();
|
|
23
|
+
await a.finished;
|
|
24
|
+
e.style.height = '';
|
|
25
|
+
e.style.overflow = '';
|
|
26
|
+
} else {
|
|
27
|
+
e.style.overflow = 'hidden';
|
|
28
|
+
let targetHeight = e.scrollHeight;
|
|
29
|
+
let a = e.animate([{height:targetHeight+'px'}, {height:'0px'}], duration);
|
|
30
|
+
a.play();
|
|
31
|
+
await a.finished;
|
|
32
|
+
e.style.display = 'none';
|
|
33
|
+
e.style.overflow = '';
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
|