Parent smooth height variation when new child is added [Vue]

Question

I have read vue transitions documentation and is pretty clear how to apply them to the desired elements. But how to make height variations smooth to the parent container (grey) when a new child (green) is added/removed to a flex column? I have tried to animate max-height of the new child from 0, but isn't working. Here is my case:

fiddle: link

code:

HTML

<html>

<body>
  <div id="app" class="demo">
   <div>
      <button v-on:click="on=!on">
        toggle
      </button>
    </div>
    <div class="background">
      <div class="container">
        <transition name="fade-outin" mode="out-in">
          <red v-if="on"></red>
          <blue v-else></blue>
        </transition>
        <transition name="fade-down">
          <div v-if="!on">
            <div style="height: 25px"></div>
            <green></green>
          </div>
        </transition>
      </div>
    </div>
  </div>
</body>
</html>

JS

var red = {
    template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};

var blue = {
    template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};

var green = {
    template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};

var app = new Vue({
  el: '#app',
  data: {
    on: true
  },
  components: {
    red,
    blue,
    green
  }
})

CSS

body {
  padding: 20px;
}
.background {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.container {
  background-color: #abc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.fade-outin-enter-active, .fade-outin-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-outin-enter, .fade-outin-leave-to {
  opacity: 0;
}

.fade-down-enter-active {
  transition: all 0.5s ease-in-out 0.5s;
}
.fade-down-leave-active {
  transition: all 0.5s ease-in-out;
}
.fade-down-enter, .fade-down-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-65px);
}

Thanks for your time,

H25E

score 1 · Answer 1 · answered May 19 '20 at 13:32

You can't use transition with height: auto, the CSS need a value to apply the transitions.

In this case, you must to use the max-height for animate your component. See this article for more details: https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0

I do some changes in your code. Try something like this, but you can improve:

<html>

<body>
  <div id="app" class="demo">
   <div>
      <button v-on:click="toggle">
        toggle
      </button>
    </div>
    <div class="background">
      <div class="container" ref="container">
        <transition name="fade-outin" mode="out-in">
          <red v-if="on"></red>
          <blue v-else></blue>
        </transition>
        <transition name="fade-down">
          <div v-if="!on">
            <div style="height: 25px"></div>
            <green></green>
          </div>
        </transition>
      </div>
    </div>
  </div>
</body>
</html>

var red = {
    template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};

var blue = {
    template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};

var green = {
    template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};

var app = new Vue({
  el: '#app',
  data: {
    on: true
  },
  components: {
    red,
    blue,
    green
  },
  methods: {
    toggle() {
      if (this.on) {
        this.$refs.container.style['max-height'] = '500px';
      } else {
        this.$refs.container.style['max-height'] = '170px';
      }  
      this.on = !this.on;
    }
  }
})

.container {
  background-color: #abc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  max-height: 170px;
  transition: max-height 3s;
}

Did this answer solve your problem? Please accept this answer and this will help others people. [How to accept an answer?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — Gabriel Willemann, May 28 '20 at 11:19

Parent smooth height variation when new child is added [Vue]

1 Answers1