オフトゥン大好き

惰眠系プログラマの作業ログで( ˘ω˘ ) スヤァ…

Vue.jsをちょこっといじってみた

AngularJSとReactは使ったことがあるけど、Vueを触ったことがなかったので練習がてらシングルページのポートフォリオサイトを作ったりしてる。で、トランジションについてやり方が分かったのでメモしておく。

表示と非表示のコンポーネントが干渉してカクカクするのを解決しようと調べたらin-out, out-inというオプションがあることがわかったが、つけてみてもなぜか適用されない。だいぶハマったがこれはv-transitionに対するオプションのよう。

今回使ったのはtransition属性。違いがいまいちわかってないがCSSでanimation-delayを指定するとうまくいった。
で、サンプルを作ってQiitaに記事を投稿した。

qiita.com

ソース置き場とサンプルページ

github.com

vue transition sample