Vuejsのtransitionに使えるCSSファイルを作ったのでnpmに公開した

スポンサーリンク
Pocket
LINEで送る

仕事でVuejsを使っていてそれのトランジション用のCSSファイルを作ってみた。

実際どんなのかは以下を見れば早い

デモ

 

Vuejsのトランジションは以下の形で書く

<transition name="fade">
 <div v-if="isShow">Fade Animation</div>
</transition>

こうすると、モデルisShowがtrue・falseが切り替わるごとにclassが順次きりかわる。

上記のコードの場合

.fade-enter-active, .fade-leave-active

見たいな感じだ。

 

というわけで、今回作ったのはそれに対応するcss

https://github.com/komayuki/vue-transition-css

ダウンロードするといくつかファイルがあって実際使うときはdist/css/vue-transition.cssを読み込めばおけい。

まだまだ、アニメーションの種類は少ないが拡張は簡単にできます。

 

拡張方法

インストール

インストールはnpmかgithubから

npm install -D vue-transition-css

git clone https://github.com/komayuki/vue-transition-css.git

 

開発用のnodeモジュールをインストール

そのままだと開発はできないのnodeモジュールをインストール

npm install

 

transitionを追加

トランジションを拡張したい場合は、src/sass/以下にファイルを置く

sassのコンパイルと結合とminifyは以下のコマンド

gulp sass

するとビルドされてdist/css/vue-transition.cssに反映される。

スポンサーリンク

 

デモをみる

実際にデモを見たい場合は以下のコマンドでwebサーバーを立ち上げる

npm run start

デモページの元になっているファイルはdocs以下のファイル。

 

watchする

sassファイルをwatchする

gulp sass:watch

 

javascriptをwatchする

npm run build

 

こんな感じで拡張できます。

さくっと作ったのでこれからいろいろ整えていこうかなと思います。