質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

284閲覧

visibility:hidden;→visibility:visible;をtransitionさせるとfocus()でフォーカスされない

_._

総合スコア32

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/06/03 22:27

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})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

総合スコア33685

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_._

2023/06/04 07:05

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

0

「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

総合スコア114714

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_._

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だけでは無理そうですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問