Плавное изменение высоты родительского элемента при добавлении нового дочернего элемента [Vue]

Я прочитал документацию по переходам vue и довольно ясно понимаю, как применять их к нужным элементам. Но как сделать изменение высоты плавным для родительского контейнера (серый), когда новый дочерний элемент (зеленый) добавляется / удаляется в гибкий столбец? Я попытался анимировать максимальную высоту нового дочернего элемента от 0, но не работает. Вот мой случай:

скрипка: ссылка

код:

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

Спасибо за ваше время,

H25E

Источник

1 ответ

Вы не можете использовать переход с height: autoCSS необходимо значение для применения переходов.

В этом случае вы должны использовать max-heightдля анимации вашего компонента. Подробнее см. В этой статье: https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0

Вношу некоторые изменения в ваш код. Попробуйте что-нибудь подобное, но вы можете улучшить:

<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;
}
Источник
Другие вопросы по тегам