Vue.js css過渡類更改

Question

我想通過添加一類.lightTheme來使用css轉換屬性來將#app背景從黑色變爲淡色。 .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>