AMPで「ページトップへ遷移する」ボタンを設置する方法

  <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>

`amp-animation`は文字通り、__アニメーションの詳細を制御__ するのに使うコンポーネントです。

__Web Animations API__ を使用してアニメーションを実現しているとのこと。

Web Animations APIがわからないので調べてみました。
[互換性抜群！「Web Animations API」の基本をおさらいしよう｜ferret フェレット](https://ferret-plus.com/7568)


現在はjsやらcssやら色んな方法がありすぎるアニメーションの実装に、標準となる仕様を作って、安全かつ効率的に使っていきましょうということでしょうか。

### アニメーションの負荷
そういえばアニメーションを実装するとなると負荷が気になりますね。

「jsとcssのどっちが負荷が少ないのか」
そんな風に考えていたのです。
しかし、どちらが正しいみたいなことはないようです。
[CSS アニメーションと JavaScript のアニメーションの比較  |  Web |  Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript?hl=ja)

とりあえずはWeb Animations APIに即した形を目指してみたいと思います。





## Nuxt.jsでダブルクォートがhtmlエンティティに変換されてしまった
![nuxt.js logo image](nuxt.png)

アニメーションを定義する記述をexampleからコピペしました。
```html
  <amp-animation id="showAnim" layout="nodisplay">
    <script type="application/json">
      {
        "duration": "200ms",
        "fill": "both",
        "iterations": "1",
        "direction": "alternate",
        "animations": [{
          "selector": "#scrollToTopButton",
          "keyframes": [{
            "opacity": "1",
            "visibility": "visible"
          }]
        }]
      }
    </script>
  </amp-animation>

<template lang="pug">
  .scroll_to_top
    amp-animation#showAnim(layout='nodisplay')
      script(type="application/json" v-html='show_arrow')

    amp-animation#hideAnim(layout='nodisplay')
      script(type='application/json' v-html="hide_arrow")

    #marker
      amp-position-observer(on='enter:hideAnim.start; exit:showAnim.start', layout='nodisplay')

    button#scrollToTopButton.scrollToTop(on='tap:top-page.scrollTo(duration=200)')

</template>
<script>
  export default {
    data() {
      return {
        show_arrow: '{"duration": "200ms","fill": "both","iterations": "1","direction": "alternate","animations": [{"selector": "#scrollToTopButton","keyframes": [{"opacity": "0.6","visibility": "visible"}]}]}',
        hide_arrow: '{"duration": "200ms","fill": "both","iterations": "1","direction": "alternate","animations": [{"selector": "#scrollToTopButton","keyframes": [{"opacity": "0","visibility": "hidden"}]}]}'
      }
    }
  }
</script>