Vue.js css过渡类更改

我想通过添加一类.lightTheme来使用css转换属性来将#app背景从黑色变为淡色。 .lightTheme类的添加按预期工作，但转换不会。我需要添加Vue transition element吗？如果是的话如何？ #app是不会离开/进入DOM - ！我只是想制作动画的属性（我不希望尽可能地增加不必要的代码Vue.js css过渡类更改

HTML

<div id="app" v-bind:class="{ lightTheme: isActive }"> 
    <button v-on:click="toggleTheme">Change theme</button> 
</div>

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; 
}

谢谢！

来源

2017-10-04 Leah

要回答你的问题，如果你必须使用这样的过渡，答案是没有。你提出的解决方案应该是开箱即用的。

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

我附上了工作片段。

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>

来源

2017-10-04 11:53:17

Vue.js css过渡类更改

回答

相关问题