visibility:hidden;→visibility:visible;をtransitionさせるとfocus()でフォーカスされない
「ポップアップをフェードイン・フェードアウトさせる」と
「ポップアップをフォーカスさせる」を組み合わせたいです
トランジションプロパティはtransformやwidth|heightよりopacity(+visibility)がいいです
がvisibilityをtransitionさせるとフォーカスがうまくいきません
(opacity:0;だけだと透明なだけなのでvisibility:hidden;が必要だけどvisibilityをtransitionさせるとfocus()が効かない)
どうすればうまくいきますか
確認用コード
html
1<span><button>none</button><div tabindex="-1">none</div></span> 2<span><button>opacity</button><div tabindex="-1" class="opacity">opacity</div></span> 3<span><button>visibility</button><div tabindex="-1" class="visibility">visibility</div></span> 4<span><button>opacity visibility</button><div tabindex="-1" class="opacity visibility">opacity visibility</div></span> 5<span><button>opacity transition</button><div tabindex="-1" class="opacity transition">opacity transition</div></span> 6<span><button>visibility transition</button><div tabindex="-1" class="visibility transition">visibility transition</div></span><!-- フォーカスされない --> 7<span><button>opacity visibility transition</button><div tabindex="-1" class="opacity visibility transition">opacity visibility transition</div></span><!-- 本命 --><!-- フォーカスされない -->
css
1span { 2 display: inline-block; 3 position: relative; 4} 5 6[tabindex="-1"] { 7 position: absolute; 8 z-index: 1; 9 background-color: silver; 10} 11 12[tabindex="-1"]:focus { 13 outline: medium solid blue; 14 background-color: red; 15} 16 17.opacity { 18 opacity: 0; 19} 20.visibility { 21 visibility: hidden; 22} 23 24.transition { 25 transition: .5s; 26} 27 28.open + .opacity { 29 opacity: 1; 30} 31.open + .visibility { 32 visibility: visible; 33}
javascript
1addEventListener('click', event => { 2 const target = event.target 3 if (target.nodeName.toLowerCase() !== 'button') return 4 if (target.className === 'open') { 5 target.className = '' 6 } else { 7 target.className = 'open' 8 target.nextSibling.focus() 9 } 10})
プレビュー
https://output.jsbin.com/kocumugaja
コードは説明用に必要箇所だけ抜き出して簡略化していますが実際は
https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/
みたいなもののポップアップ部分をフェードさせたい感じです
(width|heightはautoだとtransitionしないので大きさが不定の場合はシンプルじゃないテクニックが必要(な印象))
(transformは使うとしても補助的に使いたい)
(見た目としてはやっぱりフェードがいい)
次のコードを追加してtransitionend時にフォーカスさせてみたけどうまくいきません
(transitionを指定したポップアップを複数表示させるとフォーカスの奪い合いになる)
javascript
1addEventListener('transitionend', event => { 2 const target = event.target 3 if (target.tabIndex !== -1) return 4 if (getComputedStyle(target).visibility === 'visible') { 5 target.focus() 6 } 7}) 8// ↓フォーカスの奪い合い確認用 9addEventListener('focusin', event => { 10 console.log(event.target) 11})
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/04 07:05