x-transitionを使う
基本的な使い方
アニメーションを付けたい要素に
x-transition
を付けるだけ。チョロいぞこれは。
オプションは
x-transition.delay.500ms
みたいにドットで繋ぐだけです。（後半でちょろっと解説しています。）
コードと動作一覧
①x-transition
縮小・拡大＋透明度を上げながら文字が表示されています。
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
デフォルト動作の注意点
デフォルトの動作には「opacity（透明度）」と「scale（縮小・拡大）」の2つが含まれています。
「opacity」のみアニメーションを付けたいときは「x-transition.opacity」
「scale」のみアニメーションを付けたいときは「x-transition.scale」と設定すればOKです
②x-transiton.opacity
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
表示速度を数値で設定することもできます。
// 0.5秒で表示したい場合
x-transition.opacity.duration.500ms
②x-transiton.scale
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
表示開始時のサイズを数値で設定することもできます。
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
③x-transiton.scale.origin.[方向]
top,right.buttom.leftで指定した方向から文字が出てきます。
②との微妙な違いを見比べてみてください。
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
④.delay
それぞれのアニメーションに.delayを付ければアニメーションの動作開始を遅らせることができます。
まとめ
①アニメーションの種類（3種類）
(1)デフォルト
x-transiton
(2)透明度
x-transiton.opacity
(3)拡大縮小
x-transiton.scale
②オプション
(1)アニメーション開始地点のオプション
.origin.[方向]
origin.top.right みたいに複数組み合わせることも可能
(2)開始遅延
.delay.[ミリ秒(ms)]
簡単すぎて申し訳なくなる。