信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2018

17

12月

マテリアルデザイン

テクログ

こんにちは。じゅんちんです。


マテリアルデザインとは、本当に簡単にいいますとGoogle純正アプリケーションのようなUIデザインです。

webでアプリのような見た目を簡単に実装できたらいいですよね。


Vueでマテリアルデザインを手軽に適応できるVuetifyといったフレームワークがあります。

タブ実装に関して困ったことがあったので共有したいと思います。


タブの切り替え実装するv-tabといったタグがあるのですが、

リファレンスの中では、スライド以外のアニメーションが紹介されていないと思います。


フェードで、内容を切り替えたいのに。。。そんな場合はどうするかというと、

自作したアニメーションを以下のように適応する必要があります。


v-tab-itemに

transition (タブを進めた時のアニメ)

reverse-transition (タブを戻した時のアニメ)

を記載します。


この属性を自作したフェードのアニメーションCSSと

紐づく名前しすればフェードで切り替わるようになります。


具体的にはタグは以下のような感じになります。

my-fadeがcssの紐付けになります。


  <v-tab-item

   v-for="i in 2"

   :id="'tab-' + i"

   :key="i"

   transition="my-fade"

   reverse-transition="my-fade"   

  >


適応するフェードのアニメーションは

以下のような感じでできます。

v-tab-itemと同じコンポーネントのcssに記載すればOKです。


<style scoped>


.my-fade-enter-active, .my-fade-leave-active {

 transition-property: opacity;

 transition-duration: .25s;

}


.my-fade-enter-active {

 transition-delay: .25s;

}


.my-fade-enter, .my-fade-leave-active {

 opacity: 0

}


.my-fade-leave-active{

position: absolute;top:0;

}


</style>

この記事を書いた人

マスオさん

じゅんちん

所 属:
WEBインテグレーション事業部
出身地:
岩手
仕事内容:
開発

RELATED ARTICLE

関連記事

記事一覧へ