JavaScript + CSS: AnimXYZでCSSアニメーションを簡単に定める

AnimXYZとは

AnimXYZは、CSSアニメーションのライブラリ(ツールキット)です。アニメーションさせたい要素にクラスと属性を与えるだけで、簡単にCSSアニメーションが表現できます。

さまざまなアニメーションは組み合わせることが可能です。また、親要素に統一した設定を定めたうえで、アニメーションさせる子要素にはそれぞれ異なる属性を与えることもできます。

本稿がつくる作例は、つぎのサンプル001です。

サンプル001■JavaScript + AnimXYZ: Example of CSS animation

See the Pen JavaScript + AnimXYZ: Example of CSS animation by Fumio Nonaka (@FumioNonaka) on CodePen.

インストール

AnimXYZのインストールには、コマンドラインツールからnpmやyarnのコマンドが使えます。

npm install @animxyz/core

yarn add @animxyz/core

今回はHTMLドキュメントひとつにすべての記述を加えるので、CDNから読み込むのが簡単でしょう。まだバージョンが0.5.0ということですので、実案件に使うのは少し慎重にした方がよさそうです。

head要素

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core@0.5.0/dist/animxyz.min.css">

簡単な伸縮のアニメーション

まずは、公式サイトに紹介されている基本的なアニメーションです。classとAnimXYZ独自のxyz属性でアニメーションを定めます。

body要素

<div class="container">
    <div class="xyz-in" xyz="fade up big">I will animate in!</div>
    <div class="xyz-out" xyz="fade up big">I will animate out!</div>
</div>

親要素(class属性container)からCSSで配置を少し調整しないと、アニメーションが確かめにくいでしょう。

style要素

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
}

HTMLドキュメントをロードすれば、アニメーションが表示されます。ただ、要素がテキストなのでパッとしません。

Font AwesomeのSVGアイコンを使う

テキストをSVGのアイコンに替えれば、アニメーションがもっと見映えします。フォントだけでなく、豊富なSVGアイコンを提供するのがFont Awesome Iconsです。CDNから読み込むことにしましょう。

head要素

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />

あとは、アニメーションするテキストをアイコンに差し替えるだけです。

body要素

<div class="xyz-in" xyz="fade up big">
    <!-- I will animate in! -->
    <i class="fas fa-bell fa-9x"></i>
</div>
<div class="xyz-out" xyz="fade up big">
    <!-- I will animate out! -->
    <i class="far fa-bell fa-9x"></i>
</div>

xyz属性は見てわかる定めになっています。今回の設定を改めてまとめたのが表001です。class属性のxyz-inとxyz-outで、アニメーションの変化が逆になります。

表001■xyz属性

xyz属性	アニメーション	xyz-in	xyz-out
fade	不透明度	透明から不透明	不透明から透明
up	上下移動	上から下	下から上
big	伸縮	縮小	拡大

JavaScriptコードでアニメーションを切り替える

フェードインとアウトの要素は並べておくより、切り替えた方が見た目がよくなるでしょう。簡単なJavaScriptコードで操作するために、<button>要素を加えたうえで、アニメーションする要素も含めて、つぎのようにid属性を振ります。

body要素

<div id="xyz-in" class="xyz-in" xyz="fade up big">

</div>
<div id="xyz-out" class="xyz-out" xyz="fade up big">

</div>
<div>
    <button id="button" type="button">animate</button>
</div>

アニメーションさせる要素は、はじめはひとつを非表示(display: none;)とします。ついでに、SVGアイコンの色づけもしておきましょう。

style要素

#xyz-in {
    display: none;
    color: dodgerblue;
}
#xyz-out {
    color: turquoise;
}
#button {
    margin-top: 50px;
}

表示/非表示は、ボタンクリックでJavaScriptコードにより切り替えます。CSSスタイルを変更するのは、styleプロパティです。これで、ボタンをクリックすれば、フェードインとアウトのアニメーションが交互に表示されます。ここまでのコードと実際の動きは、以下のサンプル002でお確かめください。

script要素

const xyzIn = document.getElementById("xyz-in");
const xyzOut = document.getElementById("xyz-out");
const button = document.getElementById("button");
let isIn = true;
button.addEventListener('click', () => {
    if (isIn) {
        xyzIn.style.display = 'block';
        xyzOut.style.display = 'none';
    } else {
        xyzIn.style.display = 'none';
        xyzOut.style.display = 'block';
    }
    isIn = !isIn;
});

サンプル002■JavaScript + AnimXYZ: Basic example of CSS animation 01

See the Pen JavaScript + AnimXYZ: Basic example of CSS animation 01 by Fumio Nonaka (@FumioNonaka) on CodePen.

要素の入れ子でアニメーションを組み合わせる

AnimXYZは要素を入れ子にして設定が加えられます。たとえば、今の作例ではxyz属性の定めは、アニメーションさせるふたつの要素で変わりません。そういうとき、親要素(<div>)を加えて、そこに記述してしまってよいのです。

body要素

<div class="icon-group" xyz="fade up big">
    <!-- <div id="xyz-in" class="xyz-in" xyz="fade up big"> -->
    <div id="xyz-in" class="xyz-in">

    </div>
    <!-- <div id="xyz-out" class="xyz-out" xyz="fade up big"> -->
    <div id="xyz-out" class="xyz-out">

    </div>
</div>

親要素のアニメーションの定めを変えれば、子要素に共通して適用されます。flip-upはx軸による3次元の上向き回転で、添えた数値の50%は180度です。durationに添えた数値で、アニメーションの時間が変えられます。CodePenに公開したコードは、サンプル003でお確かめいただけます。

body要素

<!-- <div class="icon-group"xyz="fade up big"> -->
<div class="icon-group"xyz="fade big flip-up-50% duration-10">

</div>

サンプル003■JavaScript + AnimXYZ: Basic example of CSS animation 02

See the Pen JavaScript + AnimXYZ: Basic example of CSS animation 02 by Fumio Nonaka (@FumioNonaka) on CodePen.

なお、冒頭に掲げたサンプル001は、少し見映えをよくするためにコードを書き加え、CSSはBootstrapのクラスで定めました。

配列の分割代入

JavaScriptコードはとくに書き替える必要はありません。ただ、ここで配列の分割代入をご紹介しておきましょう。コードがすっきりします。前掲サンプル003のコードは、この書き替えが加えてあります。

button.addEventListener('click', () => {
    /* if (isIn) {
        xyzIn.style.display = 'block';
        xyzOut.style.display = 'none';
    } else {
        xyzIn.style.display = 'none';
        xyzOut.style.display = 'block';
    } */
    const settings = isIn ? ['block', 'none'] : ['none', 'block'];
    [xyzIn.style.display, xyzOut.style.display] = settings;

});