Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?
@nukosuke

Vue.jsとanimete.cssでアニメーション

More than 5 years have passed since last update.

Vue.js

vueでSPA作るならvue-routerもほぼ必須。

$ npm install vue vue-router --save

コンポーネントを作る

今回はscriptタグでテンプレートを記述するがvue-loaderなどを使うと1ファイル1コンポーネントで分離して書けるので便利。

    script(id='page-1' type='x-template')
      .page
        h1 ページ1
        img(src='img/page-1.gif' alt='page-1')

js側でhtmlに書いたテンプレートを拾ってコンポーネントを登録する。
vue-routerを使ってroute別に表示/非表示を切り替える。

components.p1 = Vue.component('page-1', {
  template: '#page-1'
});

animate.css

https://github.com/daneden/animate.css
全部は入らないのでいるアニメーションだけとってくる。
今回は表示にfadeInUp、非表示にslideOutRightを使う。

デフォルトのままだと表示と非表示のアニメーションが同時に発火するため、新しく入ってくるコンポーネントが前のコンポーネントに引っかかってカクつく。

https://gyazo.com/d4f9bbdaeb3925397da0152575c48c93

そこで表示のアニメーションに animation-delay を指定して前のコンポーネントが消えるまで表示アニメーションを遅延させる。

/* アニメーション */
// 表示: fadeInUp
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-delay: 0.5s; // 前のコンポーネントが消えるまで遅延させる
  animation-duration: 1s;
  animation-fill-mode: both;
}

// 非表示: slideOutRight
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
  animation-duration: 0.5s; // fadeInUpのanimation-delayと一致させる
  animation-fill-mode: both;
}

トランジションを登録する

Vue.transition('page', {
  enterClass: 'fadeInUp',
  leaveClass: 'slideOutRight',
});

要素にトランジションを適用する

    script(id='page-1' type='x-template')
      .page(transition='page') //- 登録したpageトランジションを適用
        h1 ページ1
        img(src='img/page-1.gif' alt='page-1')

動作

最終的な動作がこちら。カクつきがなくなった。

https://gyazo.com/c7331678041345ec7db3ea2c45bf3c40

おまけ

作ったサンプルページとソース置き場。

40
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nukosuke
オフトゥン大好き
mixi
全ての人に心地よいつながりを

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
40
Help us understand the problem. What is going on with this article?