【css】テキストコピー時のアニメーション - inokawablog

    【css】テキストコピー時のアニメーション

    fontawesomeでiタグをクリックした時にテキストがアニメーションするやつの実装

    今回はvue.jsで実装する。

     

    x方向y方向に拡大縮小するrubberbandというアニメーションらしい。

    テンプレートとスクリプト

    <template>
      <p v-bind:class="{ bounce: bounceAnimation }" @click="copyText">
        {{text}}
      </p>
      <input type="hidden" id="text" :value="text">
    </template>
    
    <script>
    export default {
      data: () => ({
        text: 'コピー対象テキスト',
        bounceAnimation: false,
      }),
      methods: {
        bounceAnimationInactive() {
          this.bounceAnimation = false
        },
        copyText() {
          let testingCodeToCopy = document.querySelector('#text')
          testingCodeToCopy.setAttribute('type', 'text')
          testingCodeToCopy.select()
          try {
            var successful = document.execCommand('copy');
            if (successful) {
              // コピー成功
              this.bounceAnimation = true
            } else {
              // コピー失敗メッセージ
            }
          } catch (err) {
            // エラーメッセージ
          }
          /* unselect the range */
          testingCodeToCopy.setAttribute('type', 'hidden')
          window.getSelection().removeAllRanges()
          // アニメーションが終わるまで待つ
          setTimeout(this.bounceAnimationInactive, 3000);
        },
      }
    }
    </script>

    クリックしたらcopyTextが発火してテキストコピー処理を行い、bounceAnimationをtrueにしpタグのclassにバインドしてあるbounceをactiveにする。そして、setTimeoutでアニメーションの終了を待つというかんじ。

     

    css

    .bounce {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-name: rubberBand;
    }
    .rubberBand {
      -webkit-animation-name: rubberBand;
      animation-name: rubberBand;
    }
    @keyframes rubberBand {
      from {
        transform: scale3d(1, 1, 1);
      }
      10% {
        transform: scale3d(1.05, 0.75, 1);
      }
      20% {
        transform: scale3d(0.85, 1.15, 1);
      }
      30% {
        transform: scale3d(1.02, 0.85, 1);
      }
      45% {
        transform: scale3d(.95, 1.05, 1);
      }
      75% {
        transform: scale3d(1.02, .95, 1);
      }
      to {
        transform: scale3d(1, 1, 1);
      }
    }

    cssは簡単でx方向y方向に拡大縮小しているだけ

     

    まとめ

    「css テキスト クリック アニメーション」で検索してもなかなか出てこなかった。

    animate.cssを導入するほどでもなかったのでスクラッチで書いた。