モーダルにアニメーションを付ける

要素をアニメーションさせる方法と要素の重なり順を指定する方法を見ていきます。

• transitionプロパティ
• z-index

transitionプロパティ

・最後の仕上げをしていきます。前回まででJavaScriptを使ってクリックしたらモーダルウィンドウを表示させるようにしていきました。

マスクとモーダルを表示する

・今回は表示させる際に小気味いいアニメーションを付けていく方法について学んでいきます。

・前提としてまずモーダルウィンドウを隠している場所は画面外の上側にあります。今回はそれを0.4秒かけて指定の位置に表示をさせていきます。

マスクとモーダルを非表示にする

・やり方は簡単でCSSのmodalにtransitionプロパティをつけるだけです。値はtransform 0.4s;としてあげましょう。

・こんな感じですね。

#modal {

transition: transform 0.4s;

}

z-index

・もう一つ注意点としてHTMLを書く際にモーダルがopenよりも先に書かれている場合についてです。その場合書式が崩れて思ったようなデザインになりません。

・もちろんHTMLを書き直して直してもいいのですがz-indexを使うことで重なり合った要素を思った順番に直すことができるのでその方法についても見ていきましょう。

・z-indexは指定した値が大きいほど上にきます。またz-indexを指定していない要素は0として扱われます。

・なので今回の場合openを0のままにしておいてmaskを1に、modalを2に指定してあげるとmodal, mask, openの順で正しく表示されます。

こんな感じで書いてあげましょう。

#mask{

z-index: 1;

}

#modal{

z-index: 2;

}

・モーダルウィンドウはこんな感じで作ることができます。この作り方は一例でありますので参考にしてみてください。