Vue.js

トランジション（transition）とは要素の色や大きさなどを連続的に変化させてアニメーション効果を与えたりできる機能のこと。| Learn transitions with Vue.js

書式：<transition>～～～</transition>

CSSトランジションでのフェードイン・フェードアウト

吾輩は猫である。名前はまだない。
どこで生まれたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

HTML <div id="app">
<button v-on:click="show = !show">表示を切り替える</button>
<transition>
<p v-if="show">
吾輩は猫である。名前はまだない。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 </p>
</transition>
</div>

JavaScript var app = new Vue({
el:'#app',
data: {
show: true
}
});

CSS .v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-to, .v-leave {
opacity: 1;
}
.v-enter-active, .v-leave-avtive {
transition: opacity 2.5s;
}

カスタムトランジション | Custom transition

CSSトランジションの実装をサポートする外部のライブラリ(animate.css)を使用して。| Using an external library (animate.css) that supports the implementation of CSS transitions.

何もないところから、ジャンプして現れました。ビックリした？

HTML <div id="app2">
<button v-on:click="show = !show">表示を切り替える</button>
<transition>
<p class="animate__animated animate__bounce" v-if="show">
何もないところから、ジャンプして現れました。ビックリした？ </p>
</transition>
</div>

JavaScript var app2 = new Vue({
el:'#app2',
data: {
show: true
}
});

CSS animate.cssが用意してくれているので何も書かなくてもＯＫ

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー