Vue.js css 转换类更改

Posted 2023-03-06

【中文标题】Vue.js css 转换类更改

【英文标题】：Vue.js css transition on class change

【发布时间】：2018-03-15 18:54:13

【问题描述】：

我正在尝试使用 css 转换属性通过添加 .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;

谢谢！

【问题讨论】：

我知道这是一个较老的问题，但我也遇到了这个问题。我想补充一点，我发现 Vue 的反向设计很糟糕，通过类操作的本地浏览器转换被有效地禁用。通过使用 Vue，我们删除了必须通过使用框架中的附加功能重新引入的原生功能。

【参考方案1】：

如果您必须为此类事情使用过渡，要回答您的问题，答案是否。您提出的解决方案应该开箱即用。

可能有其他东西干扰了您的代码，但您发布的那个是正确的。

我附上了工作的 sn-p。

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>