类更改时的 Vue.js css 转换

Question

我正在尝试使用 css transition 属性通过添加 .lightTheme 类将 #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>