[Vue.js メモ]条件に応じてトランジション変更したい場合

[Vue.js メモ]条件に応じてトランジション変更したい場合:

条件に応じてトランジションを変更する

テンプレートでtransitionコンポーネントをつかうとき、

ある条件のときは、左から右に、

ある条件のときは　右から左に　のように条件・状態に応じてアニメーションを変更したいときには以下のように固定的に指定するのではなく、

<transition name="slide"> 

transitionでv-bindを使って、条件に応じて設定する、というやり方。

ここでは条件判定は三項演算子でやった。

• msg.humanプロパティには、trueかfalseが格納されているとする

<transition v-bind:name="msg.human? 'slide-fade-l2r':'slide-fade-r2l'"> 

省略形

<transition :name="msg.human? 'slide-fade-l2r':'slide-fade-r2l'"> 

• トランジション用CSS

左から右に登場するトランジション

.slide-fade-l2r-enter-active { 
    transition: all .3s ease; 
} 
.slide-fade-l2r-enter, 
.slide-fade-l2r-leave-to { 
    opacity: 0; 
    transform: translateX(10px); 
} 

右から左に登場するトランジション

.slide-fade-r2l-enter-active { 
    transition: all .3s ease; 
} 
.slide-fade-r2l-enter, 
.slide-fade-r2l-leave-to { 
    opacity: 0; 
    transform: translateX(-10px); 
} 

参考

• https://jp.vuejs.org/v2/guide/transitions.html
• https://github.com/vuejs/vuejs.org/pull/256