クラス変更時のVue.js CSSトランジション

Question

.lightThemeクラスを追加して、#appの背景を黒から白にフェードインするためにCSSトランジションプロパティを使用しようとしています。 .lightThemeクラスの追加は期待通りに機能しますが、移行は行いません。

Vue transition elementを追加する必要がありますか？そしてもしそうなら、どのように？ #appは、DOMを入力/残されていない - 私はちょうどそれがプロパティ（だアニメーション化したいと私は、可能な場合は、不要なコードを追加する必要はありません

HTML

<div id="app" v-bind:class="{ lightTheme: isActive }"> 
    <button v-on:click="toggleTheme">Change theme</button> 
</div> 

JS

！

new Vue({ 
    el: '#app', 

    data: { 
     isActive: false 
    }, 

    methods: { 
     toggleTheme: function(){ 
      this.isActive = !this.isActive; 
     // some code to filter users 
     } 
    } 

}); 

CSS

#app { 
    background: black; 
    transition: 1s; 
} 

#app.lightTheme { 
    background: white; 
} 

ありがとうございます！

Answer 1

このような場合にトランジションを使用する必要がある場合は、答えはで、です。あなたが提案した解決策は、すぐに機能するはずです。

あなたのコードを妨害している可能性がありますが、投稿したものが正しいと思われます。

私は作業スニペットを添付しました。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     isActive: false 
 
    }, 
 
    methods: { 
 
     toggleTheme: function(){ 
 
      this.isActive = !this.isActive; 
 
     } 
 
    } 
 
});

#app { 
 
    background: black; 
 
    transition: 1s; 
 
} 
 

 
#app.lightTheme { 
 
    background: white; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app" :class="{ lightTheme: isActive }"> 
 
    <button @click="toggleTheme">Change theme</button> 
 
</div>