JS：追加したエレメントを一瞬だけ目立たせる

JavaScriptを使って追加したpタグなどのエレメントを一瞬だけ目立たせて表示させる方法。

結論としては、animate()関数を利用している。

animate関数はMDNのドキュメントでは「実験的な機能です」と記述があった。
ブラウザで確認をしたところ、Chrome, Opera, Edge では問題なく動作した。Firefoxは確認していないが動作確認ブラウザ欄には可能とあったので動作するはず。

animate関数の使い方
プログラム全体

animate関数の使い方

animate関数はDOM要素として取得したオブジェクトに対し直接利用できる。

構文は以下の通り。

element.animate(keyframes, options);

keyframes

変化させたい値をオブジェクト形式で記述する

options

変化時間。ミリ秒単位で指定する

構文を見ても良く分からないので、実際のサンプルを見た方が分かりやすい。
今回のサンプルではdocument.createElementで生成したpタグに対して利用している。

使用例

1let p = document.createElement("p");    // pタグを生成
2p.setAttribute("class", "ptag");    // クラスptagを設定（特に必要ない）
3p.textContent = "Hello!";       // pタグに設定する文字列
4 
5// animate関数を使って文字色と背景色を2秒間で変化させる
6p.animate(
7    {
8        color: ["#fff", "#000"],        // 文字色: 白→黒
9        backgroundColor: ["hotpink", "white"],  // 背景色: ピンク→白
10    },
11    2000    // 変化時間（単位: ミリ秒）
12);

keyframesはオブジェクト形式で複数項目指定できる。
上記例では文字色（color）と背景色（backgroundColor）について指定。値の指定は配列として指定する。

文字色（color）を例にとると

color: [“#fff”, “#000”],

となっているが、#fff（白）から#000（黒）まで徐々に変化するという意味になる。

背景色（backgroundColor）の指定ではあえて色名で指定してみた。面白いことにこちらもきちんとピンクから白に変化した。

options項目では変化時間をミリ秒単位で指定している。
サンプルでは2000ミリ秒（2秒）で変化させている。

options項目などはもっと色々な指定が可能である。詳しくはMDNのサイトを参考にされたし。

Element: animate() メソッド - Web API | MDN

Element インターフェイスの animate() メソッドは、新しい Animation を生成し、この要素へ適用し、そしてアニメーションの再生を行うショートカットメソッドです。生成した Animation オブジェクトのインスタンス...

プログラム全体

サンプルのプログラム全体を示す。

index.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,user-scalable=yes">
6    <link rel="stylesheet" href="style.css">
7    <script src="main.js" type="text/javascript"></script>
8    <title>追加したエレメントを一瞬だけ目立たせる</title>
9</head>
10<body>
11    <header>
12        <h1>追加したエレメントを一瞬だけ目立たせる</h1>
13    </header>
14 
15    <div id="contents">
16        <p><button id="btnAdd">エレメントを追加する</button></p>
17    </div>
18 
19</body>
20</html>

main.js

1/*
2 * 追加したエレメントを一瞬だけ目立たせる
3 */
4 
5let contents = null;
6 
7/*
8 * エレメントをコンテンツに追加
9 */
10function addElement(){
11    let p = document.createElement("p");    // pタグを生成
12    p.setAttribute("class", "ptag");    // クラスptagを設定（特に必要ない）
13    p.textContent = "Hello!";       // pタグに設定する文字列
14     
15    // animate関数を使って文字色と背景色を2秒間で変化させる
16    p.animate(
17        {
18            color: ["#fff", "#000"],                    // 文字色: 白→黒
19            backgroundColor: ["hotpink", "white"],  // 背景色: ピンク→白
20        },
21        2000    // 変化時間（単位: ミリ秒）
22    );
23    contents.appendChild(p);
24}
25 
26/*
27 * 起動時の処理
28 */
29window.addEventListener("load", function(){
30    // DOM要素取得（コンテンツ部分）
31    contents = document.getElementById("contents");
32    let btnAdd = document.getElementById("btnAdd");
33     
34    // ボタンイベント
35    btnAdd.addEventListener("click", addElement, false);
36 
37});

style.css

1/* style.css */
2@charset "utf-8";
3 
4*{
5    margin: 0;
6    padding: 0;
7}
8body{
9    font-family: Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', meiryo, sans-serif;  /* フォント */
10}
11/* ヘッダ */
12header{
13    background-color: yellowgreen;
14    color: black;
15}
16header h1{
17    font-size: 24pt;
18    padding: 20px 3em;
19    line-height: 1.7em;
20    letter-spacing: .2em;
21    text-align: center;
22}
23/* コンテンツ */
24div#contents{
25    font-size: 16pt;
26    background-color: #fff;
27    width: 800px;
28    margin: 0 auto;
29    padding: 0;
30}
31 
32div#contents button{
33    width: 100%;
34}
35 
36p{
37    margin: 1em;
38}
39 
40.ptag{
41    margin-top: 1em;
42}
43 
44/* メディアクエリ設定 */
45@media screen and (min-width:376px) and (max-width:960px) {
46/* タブレット用のcssを記述 */
47    header h1{
48        padding: 20px;
49        font-size: 16pt;
50    }
51    div#contents{
52        width: auto;
53        margin: 10px 10px;
54        padding: 1em;
55        font-size: 14pt;
56    }
57}
58  
59@media screen and (max-width:376px) {
60/* スマホ用のcssを記述 */
61    header h1{
62        padding: 20px;
63        font-size: 14pt;
64    }
65    div#contents{
66        width: auto;
67        margin: 0 0;
68        padding: 5px 10px;
69        font-size: 12pt;
70    }
71}