Vueのテンプレート部分のコードが書かれていないので、想像をたくましくして回答します(今後は関係する部分のテンプレートも書いて質問してください)。
おそらく、v-if="prop-data.show"
のようにしてトランジションしようとしているのだと思いますが、「問題を変更する際にフェードアウト・フェードインしたい」ということであれば、v-if
ではなく、v-bind:key
を使うのが良いでしょう。key
の値を変更することで、トランジションを発生させることができます。show
プロパティも必要なくなります。
下は一例です。
html
1<div id="app">
2 <transition name="fade" mode="out-in">
3 <div class="karuta" :key="toggle">{{karuta.text}}</div>
4 </transition>
5 <button @click="next">ボタン</button>
6</div>
javascript
1const karutas = [
2 {id: 1, text: 'いち'},
3 {id: 2, text: 'に'},
4 {id: 3, text: 'さん'}
5]
6
7new Vue({
8 el: '#app',
9 data() {
10 return {
11 toggle: true,
12 karuta: {
13 id: 0,
14 text: 'はじめ'
15 }
16 }
17 },
18 methods: {
19 next() {
20 this.toggle = !this.toggle
21 const karuta = karutas[Math.floor(Math.random()*3)]
22 this.karuta = karuta
23 }
24 }
25})
css
1.karuta.fade-enter, .karuta.fade-leave-to {
2 opacity: 0;
3}
4.karuta.fade-enter-active, .karuta.fade-leave-active {
5 transition: opacity 0.5s;
6}
Vueのガイドの、「トランジションとアニメーション」>「Enter/Leave とトランジション一覧」>「要素間のトランジション」を熟読すると、解決できると思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/01/07 11:26