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

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

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

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

#### サンプル001■JavaScript + AnimXYZ: Example of CSS animation
<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="LYROJZL" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript + AnimXYZ: Example of CSS animation">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/LYROJZL">
  JavaScript + AnimXYZ: Example of CSS animation</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

```terminal
npm install @animxyz/core
```

```terminal
yarn add @animxyz/core
```

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

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


# 簡単な伸縮のアニメーション
まずは、公式サイトに紹介されている[基本的なアニメーション](https://animxyz.com/docs/#the-basics)です。`class`とAnimXYZ独自の`xyz`属性でアニメーションを定めます。

```html: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で配置を少し調整しないと、アニメーションが確かめにくいでしょう。

```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](https://fontawesome.com/icons?d=gallery)です。CDNから読み込むことにしましょう。

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

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

```html: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`属性を振ります。

```html: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アイコンの色づけもしておきましょう。

```css:style要素
#xyz-in {
	display: none;
	color: dodgerblue;
}
#xyz-out {
	color: turquoise;
}
#button {
	margin-top: 50px;
}
```

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

```javascript: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
<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="WNGZPVM" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript + AnimXYZ: Basic example of CSS animation 01">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/WNGZPVM">
  JavaScript + AnimXYZ: Basic example of CSS animation 01</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

```html: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でお確かめいただけます。

```html: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
<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="LYRepWE" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript + AnimXYZ: Basic example of CSS animation 02">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/LYRepWE">
  JavaScript + AnimXYZ: Basic example of CSS animation 02</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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


# 配列の分割代入
JavaScriptコードはとくに書き替える必要はありません。ただ、ここで配列の[分割代入](https://qiita.com/FumioNonaka/items/20e96ca9ede2ae157bcc#分割代入)をご紹介しておきましょう。コードがすっきりします。前掲サンプル003のコードは、この書き替えが加えてあります。

```javascript
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;

});
```