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件

ベストアンサー

visibility:hidden;が必要な理由が、opacity:0;だけだマウスホバーに反応してしまうということなら、pointer-eventsでマウスに反応しないようにすればどうでしょう。

css
1.visibility {
2/* visibility: hidden; */
3  pointer-events: none;
4}
5.open + .visibility {
6 /* visibility: visible; */
7  pointer-events: none;
8}

投稿2023/06/04 03:01

hatena19

総合スコア33102

回答へのコメント

_._

2023/06/04 07:05

pointer-events ↑これ知りませんでした noneにしたらクリックや選択がnoneの要素を貫通してその裏にある要素で起こるんですね pointer-events採用してみます

「visibility: hidden」の要素にはfocusできません。transitionによりラグが発生しているため表示直後はvisibility:visibleが有効になっていないのでしょう。
端的に言えば組み合わせの相性がわるいのでこの方法はやめたほうがいいということですが、どうしてもというのであればsetTimeoutすれば対応可能です

javascript
1addEventListener('click', ({target})=> {
2  if (target.matches(':not(button)')) return false;
3  if (target.matches('.open')){
4    console.log(target.classList);
5    target.classList.remove('open');
6  } else {
7    target.classList.add('open');
8    setTimeout(()=>target.nextElementSibling.focus(),100);
9  }
10});

投稿2023/06/03 23:33

yambejp

総合スコア112600

回答へのコメント

_._

2023/06/04 00:31

どうもありがとうございます自分でtransitionendの例を出しておきながら実際は https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/ のようなものがすでにあってそのcssのdisplay:none;→display:block;の部分を置き換えるだけでフェードイン/アウトを実現したいなと思っているのですが cssだけでは無理そうですか？

あなたの回答