Vue.js css transition on class change
To answer your question if you have to use transition for something like this, the answer is no. The solution you proposed should work out of the box.
There is probably something else that is interfering with your code, but the one you posted is correct.
I attached the working snippet.
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>