MathBox でトランジションアニメーション（フェードイン/フェードアウト）を作る

　スライドを作ったらトランジションアニメーションも入れたいところです。とりあえず基本のフェードイン/フェードアウトを入れてみます。どんどんメソッドチェーンが長くなるので、一つ一つ区切って理解していくと良いと思います。

# フェードイン/フェードアウト
　[前回](https://qiita.com/YuichiSato/items/4e1c8ab95b62f1811860)のコードを元に追加していきましょう。
　ふわっと出したり消したい場合は `reveal()` を使います。 `present.slide().reveal().interval()` のように適当な位置に差し込みます。スライド開始でフェードインさせたいので、 `slide()` の後ろに `reveal()` を入れています。ここで一つ注意が必要で、トランジションの単位でも `end()` を入れる必要があるということです。ここではスライドが切り替わるタイミングでフェードアウトさせたいので、スライド区切りの `end()` の手前にもう一つ `end()` を入れています。

　以下のコードでは一枚目のスライドのみにフェードイン/フェードアウトを適用しています。 `end()` を削除してみて動作の違いを確認してみて下さい。

　また、同じようにして二枚目もフェードイン/フェードアウトさせるようにしてみて下さい。

```javascript
present.slide().reveal().interval({
  width: 2,
  expr: function (emit, x, i, time) {
    emit(x, 0);
  },
  items: 1,
  channels: 2,
}).line({
  color: 0x3090FF,
  width: 10,
}).end().end()
  .slide().interval({
    width: 128,
    expr: function (emit, x, i, time) {
      var d = Math.sin((x + time) * 2);
      emit(x, d * .5);
    },
    items: 1,
    channels: 2,
  }).line({
    color: 0xFF3090,
    width: 10,
  });
```

## パラメータの指定
　遷移の期間を少し短くしてみましょう。 `reveal({ duration: 0.1 })` のようにパラメータを渡してみましょう。 `duration` のデフォルト値は `0.3` なので三倍早くなるはずです。他にも色々なパラメータがあるので、[ドキュメント](https://github.com/unconed/mathbox/blob/master/docs/primitives.md#present/reveal)を見ながら試してみて下さい。

# コード全体
　二枚目のスライドにも `reveal()` を適用したコード全体は下記の通りです。

```html
<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title>MathBox - XYZW Test</title>
	<script src="../../build/mathbox-bundle.js"></script>
	<link rel="stylesheet" href="../../build/mathbox.css">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
    </head>
    <body>
	<script>
	 mathbox = mathBox({
	     plugins: ['core', 'controls', 'cursor'],
	     controls: {
		 klass: THREE.OrbitControls
	     },
	 });
	 three = mathbox.three;

	 three.camera.position.set(2.3, 1, 2);
	 three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);

	 view = mathbox.cartesian({
	     range: [[-6, 6], [-1, 1], [-1, 1]],
	     scale: [6, 1, 1],
	 });

	 present = view.present({
	     index: 1
	 })

	 function prevSlide () {
	     present.set('index', present.get('index') - 1);
	 }

	 function nextSlide () {
	     present.set('index', present.get('index') + 1);
	 }
	 
	 present.slide().reveal({
	     duration: 0.1,
	 }).interval({
	     width: 2,
	     expr: function (emit, x, i, time) {
		 emit(x, 0);
	     },
	     items: 1,
	     channels: 2,
	 }).line({
	     color: 0x3090FF,
	     width: 10,
	 }).end().end()
		.slide().reveal({
		    duration: 0.1,
		}).interval({
		    width: 128,
		    expr: function (emit, x, i, time) {
			var d = Math.sin((x + time) * 2);
			emit(x, d * .5);
		    },
		    items: 1,
		    channels: 2,
		}).line({
		    color: 0xFF3090,
		    width: 10,
		});

	 present.grid({
	     stroke: 'dashed',
	 });
	</script>
    </body>
</html>
```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="satoyuichi" data-slug-hash="VJxYNd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="fade in and out">
  <span>See the Pen <a href="https://codepen.io/satoyuichi/pen/VJxYNd/">
  fade in and out</a> by Yuichi Sato (<a href="https://codepen.io/satoyuichi">@satoyuichi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>