小编Lea*_*eah的帖子

我是flexbox的新手,所以请耐心等待.我的HTML:

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

使用flexbox,我试图实现以下布局:

.

在没有为容器设置高度的情况下,我能够实现这一目标的最简单方法是什么？.one预计会改变高度.

我正在尝试使用css transition属性#app通过添加类将背景从黑色逐渐淡化为白色.lightTheme。.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;
}

谢谢！