回答編集履歴
2
jQueryのdelayメソッドを使わなくてもタイミングを合わせられるので、削除
answer
CHANGED
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
// .NavMenuのtransitionに効かせている、アニメーション時間を動的にとるための変数を用意
|
|
41
41
|
const navDom = $('.NavMenu').get(0);
|
|
42
42
|
const navStyle = window.getComputedStyle(navDom);
|
|
43
|
+
// 画面幅が、960px以上だと、0か、数値にならないとなるので、その場合は、600が入るようにした。
|
|
43
44
|
const navTransitionDuration = (isNaN(parseFloat(navStyle.transitionDuration)) || parseFloat(navStyle.transitionDuration) == 0 ? 0.6 : parseFloat(navStyle.transitionDuration)) * 1000;
|
|
44
45
|
// heightに効かせたインナースタイルをタイミングよく解除するためのタイマーを用意
|
|
45
46
|
let classDelTimer = null;
|
|
@@ -50,12 +51,13 @@
|
|
|
50
51
|
// heightのインナースタイルを解除しつつ、activeクラスを付与
|
|
51
52
|
$('.NavMenu').css('height', '').addClass('active'); //クラスを付与
|
|
52
53
|
} else {
|
|
53
|
-
// クラスを外す時、強制的に表示状態を保つため、heightのインナースタイルを効かせつつ、クラスを外す。
|
|
54
|
+
// クラスを外す時、強制的に表示状態を保つため、heightのインナースタイルを効かせつつ、クラスを外す。
|
|
54
|
-
$('.NavMenu').css('height', 'auto').removeClass('active')
|
|
55
|
+
$('.NavMenu').css('height', 'auto').removeClass('active'); //クラスを外す
|
|
55
56
|
// transitionアニメーションが終了したタイミングで、heightインナースタイルを外すようタイターセット
|
|
56
57
|
if (classDelTimer) {
|
|
57
58
|
clearTimeout(classDelTimer);
|
|
58
59
|
}
|
|
60
|
+
// transition時間プラス0.1秒とすることで、処理遅延が多少出ても、違和感をなくせる
|
|
59
61
|
classDelTimer = setTimeout(function(){
|
|
60
62
|
$('.NavMenu').css('height', '');
|
|
61
63
|
}, navTransitionDuration + 100);
|
1
transitionDurationが、0や、数値にならなかった時の対応を追記した
answer
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
// .NavMenuのtransitionに効かせている、アニメーション時間を動的にとるための変数を用意
|
|
41
41
|
const navDom = $('.NavMenu').get(0);
|
|
42
42
|
const navStyle = window.getComputedStyle(navDom);
|
|
43
|
-
const navTransitionDuration = parseFloat(navStyle.transitionDuration) * 1000;
|
|
43
|
+
const navTransitionDuration = (isNaN(parseFloat(navStyle.transitionDuration)) || parseFloat(navStyle.transitionDuration) == 0 ? 0.6 : parseFloat(navStyle.transitionDuration)) * 1000;
|
|
44
44
|
// heightに効かせたインナースタイルをタイミングよく解除するためのタイマーを用意
|
|
45
45
|
let classDelTimer = null;
|
|
46
46
|
|