VUE.JS CSS关于类变更的过渡

Question

我试图通过添加一类.lightTheme来使用CSS过渡属性从黑色到白色的#app背景。.lightTheme类的添加按预期工作，但过渡不可能。

我必须添加VUE过渡元素吗？如果是这样，怎么样？#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

要回答您的问题，如果您必须将过渡使用这样的东西，答案是 no 。您提出的解决方案应开箱即用。

可能还有其他干扰您的代码，但是您发布的代码是正确的。

我附上了工作片段。

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>