transitionが効きません。

ボタンをクリックするとモーダル画面が表示されるコードを書きました。
opacityが0⇒1に変わる時間を500msecにしたのですが一瞬で表示され、原因が分かりません。

申し訳ありませんがよろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <div class="contents">
12      <div class="container">
13        <button class="modal-btn modal-open" type="button" id="modalOpen">
14          Open
15        </button>
16      </div>
17
18      <div id="modal" class="modal">
19        <div class="modal-overlay js-modal-close">
20          <div class="modal-container">
21            <div class="modal-content">
22              <h2 class="modal-content-ttl">モーダルのタイトルです</h2>
23              <p class="modal-content-txt">
24                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
25                Quibusdam dignissimos delectus quia ducimus quae architecto
26                repellat expedita rem ipsam quisquam esse, cum atque
27              </p>
28            </div>
29            <!-- /.modal-content -->
30            <button class="modal-btn modal-close js-modal-close">Close</button>
31          </div>
32          <!-- /.modal-container -->
33        </div>
34        <!-- /.modal-overlay -->
35      </div>
36      <!-- /.modal -->
37    </div>
38    <!-- /.contents -->
39    <script src="main.js"></script>
40  </body>
41</html>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6body{
7  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic Pro N', Meiryo, sans-serif;
8}
9
10.contents{
11  max-width: 400px;
12  padding: 80px 40px 0 40px;
13  margin: 0 auto;
14}
15
16.modal-btn {
17  border: none;
18  border-radius: 4px;
19  color: #fff;
20  cursor: pointer;
21  font-size: 1rem;
22  padding: 10px 20px;
23}
24
25.modal-open{
26  background: orangered;
27}
28
29.modal-close{
30  background: darkblue;
31}
32
33.modal {
34  display: none;
35  opacity: 0;
36}
37
38.modal.is_open {
39  display: block;
40}
41
42.modal-overlay {
43  align-items: center;
44  background: rgba(0, 0, 0, .75);
45  bottom: 0;
46  display: flex;
47  justify-content: center;
48  left: 0;
49  position: fixed;
50  right: 0;
51  top: 0;
52  
53}
54
55.modal-container {
56  background: #fff;
57  border-radius: 4px;
58  max-height: 100%;
59  max-width: 600px;
60  padding: 30px 20px;
61  overflow: scroll;
62}
63
64.modal-content-ttl{
65  font-size: 2rem;
66}
67
68.modal-content-txt{
69  line-height: 1.67;
70}
71

js
1const modalBtn = document.getElementById("modalOpen");
2const modal = document.getElementById("modal");
3
4// opacity:0=>1にかかる時間設定
5const ms = 500;
6modal.style.transition = "opacity " + ms + "ms";
7
8modalBtn.addEventListener("click", () => {
9  //  displayがnone=>blockになる
10  modal.classList.add("is_open");
11  // opacityが1になる
12  modal.style.opacity = 1;
13});

js
1modalBtn.addEventListener("click", () => {
2  //  displayがnone=>blockになる
3  modal.classList.add("is_open");
4  // blockになった後、opacityが50ms後に0⇒1になる
5  setTimeout(function () {
6    modal.style.opacity = 1;
7  }, 100);
8});

行動規範の内容に同意します

回答3件

ベストアンサー

原因が分かりません

CSSのアニメーションはdisplay: noneの時には実行されないです。

ですので、フェード部分はopacityだけ操作するようにするといいでしょう。
重ね合わせの問題は、z-index pointer-eventなどで処理するか、要件に合うならvisibilityで制御するか、どうしてもdisplay:noneを使いたいならばsetTimeoutなどでイベントループを切ってdisplay:blockの描画をさせてからopacityを適用すれば上手くいくかもしれません。

投稿2021/10/23 01:18

編集2021/10/23 01:20

Lhankor_Mhy

総合スコア36163

bag_ai

2021/10/23 01:55

イベント部分を修正したら思っていた結果になりました。ありがとうございます。 displayのnone⇒blockにアニメーションが効かない件、そういうものと覚えておきます。 (displayの表示とほぼ同時にopacityが0⇒1となっているので今回は効かない？？) 今回の修正のよう、setTimeoutを使い、時間を空けることが「イベントループを切る」という技みたいなものでしょうか？

Lhankor_Mhy

2021/10/23 02:17 編集

> そういうものと覚えておきます。なお、animation の場合には、displayがnone以外になった時にアニメーションがスタートします。 https://www.w3.org/TR/css-animations-1/#:~:text=setting%20the%20display%20property%20to%20none%20will%20terminate%20any%20running%20animation%20applied%20to%20the%20element%20and%20its%20descendants. --- > setTimeoutを使い、時間を空けることが「イベントループを切る」という技みたいなものでしょうか？だいたいそんな感じですが、時間を空けること自体は重要ではないです。（タイミング値が100ではなく0でも動く）イベントループを理解することは、初心者脱出に必要だと思いますので、お時間のある時にでも以下をお読みください。 https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized-event-loop.html https://ja.javascript.info/event-loop

bag_ai

2021/10/23 09:44

イベントループはまだ私のレベルでは理解できないので、そういう仕組みがあると記憶し、先ずはコード作成に慣れていこうと思います。ありがとうございました。

行動規範の内容に同意します

原因は Lhankor_Mhyさんの指摘通りだと思います。

サンプルを作成して確認したところ、下記の修正でうまくいくようです。

css
1.modal {
2  /* `display: none;  */
3  visibility: hidden;
4  opacity: 0;
5}
6
7.modal.is_open {
8  /* display: block; */
9  visibility: visible;
10  display: block;
11}

オーバーレイは position: fixed; で固定しているので、多要素に影響はないと思われます。

投稿2021/10/23 01:57

hatena19

総合スコア33795

bag_ai

2021/10/23 09:45

提案いただいたコードで上手くいきました。ありがとうございます。

行動規範の内容に同意します

CSSで@keyframesを使うのがいいと思います。

css
1/* 変更 */
2.modal.is_open {
3  display: block;
4  animation-name: fade-in;
5  animation-duration: .5s;
6}
7
8/* 追加 */
9@keyframes fade-in {
10    from {
11        opacity: 0;
12    }
13    to {
14        opacity: 1;
15    }
16}