CSS アニメーションとトランジションのトリガ
CSS アニメーションは、ウェブ要素をある CSS スタイル構成から別の構成にトランジションすることができます。ブラウザは、定義済みのアニメーションを読み込み時に開始できますが、イベントでトリガされる CSS アニメーションは、クラスの追加と削除によって行われます。AMP では、これら両方の種類のアニメーションをサポートしています。
正確にタイミングを合わせる必要のない、小さめの完結型アニメーションの場合は、CSS を使用してください。
CSS とキーフレームの定義
AMP では、次の方法で CSS を定義できます。
- ドキュメントの head 内にある
<style amp-custom>タグに定義。20,000 バイトの制限。 - インラインスタイル。インラインスタイルの各インスタンスには、1,000 バイトの制限があります。インラインスタイルは、
<style amp-custom>の 20,000 バイトの制限に含まれます。 - ドキュメントの head 内にある
<style amp-keyframes>タグに定義。500,000 バイトの制限。キーフレームプロパティに制限されます。
すっきりした広告を維持して高速に処理できるようにするために、AMP は <amp style-custom> タグに 20,000 バイトの CSS 制限を設けています。これを使用してアニメーションのスタイルを定義することはできますが、貴重なサイトスタイルのリソースを取り上げることなく、長々としたアニメーションを使用できるように、<amp style-keyframes> タグ内の制限は 500,000 バイトになっています。
<style amp-custom> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; } </style> </head> <body> <div></div> <style amp-keyframes> @keyframes mymove { 0% {transform: translatey(0px);} 25% {transform: translatey(200px);} 75% {transform: translatey(50px);} 100% {transform: translatey(100px);} } </style> </body> クラスの追加、削除、および切り替え
AMP アクションの toggleClass を使用して、定義済みの要素にクラスを追加し、削除することができます。
elementName.toggleClass(class="className") ハンバーガーメニューのアニメーションなど、ユーザーが操作する同一の要素のクラスを切り替えることができます。
<div id="hamburger" tabindex="1" role="button" on="tap:hamburger.toggleClass(class='close')" ></div> force 属性を追加すると、toggleClass アクションをほかの要素にも適用して 2 つのクラス間を切り替えることができます。
<button on="tap:magicBox.toggleClass(class='invisible', force=true),magicBox.toggleClass(class='visible', force=false)" > Disappear </button> <button on="tap:magicBox.toggleClass(class='visible', force=true),magicBox.toggleClass(class='invisible', force=false)" > Reappear </button> クラスを削除して、適用し直せないようにする必要がある場合は、force 属性を false の値に指定して追加します。クラスを追加して削除を無効にする必要がある場合は、force 属性を true の値に指定して追加します。
CSS と状態によるアニメーション
amp-bind を使用すると、状態が指定された任意の数の CSS クラスを追加・削除することができます。
<head> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" ></script> <style amp-custom> div { height: 100px; width: 100px; margin: 1em; background-color: green; margin-left: 100px; transition: 2s; } .visible { opacity: 1; } .invisible { opacity: 0; } .left { transform: translatex(-50px); } .right { transform: translatex(50px); } button { margin-top: 1rem; margin-left: 1rem; } </style> </head> <body> <amp-state id="magicBox"> <script type="application/json"> { "visibleBox": { "className": "visible" }, "invisibleBox": { "className": "invisible" }, "moveLeft": { "className": "left" }, "moveRight": { "className": "right" } } </script> </amp-state> <div [class]="magicBox[animateBox].className"></div> <button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button> <button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button> <button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button> <button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button> </body> 複数のクラスのアニメーションを定義するには、まず、ドキュメントの head にある <style amp-custom> タグに CSS クラスのリストを追加します。
.visible { opacity: 1; } .invisible { opacity: 0; } .left { transform: translatex(-50px); } .right { transform: translatex(50px); } 次に、各クラスと状態をペアリングします。
<amp-state id="magicBox"> <script type="application/json"> { "visibleBox": { "className": "visible" }, "invisibleBox": { "className": "invisible" }, "moveLeft": { "className": "left" }, "moveRight": { "className": "right" } } </script> </amp-state> そして、要素とクラスをリンク付けます。
<div [class]="magicBox[animateBox].className"></div> 状態は、関連付けられた AMP アクションやイベントによって変化します。次の例では、ユーザーインタラクションによって状態が変化します。
<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button> <button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button> <button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button> <button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button> amp-bind をこのように使用すると、定義済みのクラスに明示的にクラスを設定することができます。そのため、別のクラスを削除するように要求する必要がありません。