Почему transition-group анимирует прозрачность а не высоту?

Question

WEDLEYM @WEDLEYM

Vue.js

Почему transition-group анимирует прозрачность а не высоту?

Здравствуйте, этот код прекрасно анимирует изменение прозрачности при удалении елемента массива но почему не анимируется высота...

<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</header>

<body>
  <div id="app">
    <transition-group name="msgAnimation" tag="div">
      <div v-for="(obj, i) in messages" :key="obj.key" class="wrapper">
        <div class="wrapper__block" @click="messages.splice(i, 1)">
          {{ obj.msg }}
        </div>
      </div>
    </transition-group>
  </div>
</body>
<style>
  .wrapper {
    width: 100%;
    height: 9vmin;
  }

  .wrapper__block {
    background: green;
    height: 9vmin;
    width: 100%;
  }

  .msgAnimation-enter-active,
  .msgAnimation-leave-active {
    transition: all 5s;
  }

  .msgAnimation-enter,
  .msgAnimation-leave-to {
    height: 0;
    opacity: 0;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      messages: [
        { key: 0, msg: "Are u hacker" }
      ],
    }
  })

</script>

</html>

Вопрос задан более двух лет назад
99 просмотров

1 комментарий

Подписаться 2 Средний 1 комментарий

Решения вопроса 1

1 комментарий

hannyto1111 @hannyto1111

Позвольте похожий вопрос - почему не анимируэтся этап создания елемента, к примеру в вашем примере, а только ищезновения

<template>
  <div id="list-demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  opacity: 1;
}
.list-enter-active,
.list-leave-active {
  transition: all 2s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
}
</style>

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Vue.js

+1 ещё

Простой
При установке vuejs выходят ошибки, как исправить?
- 1 подписчик
- 07 мая
- 99 просмотров
1

ответ
Vue.js

+1 ещё

Простой
Как решить ошибку globalThis is not defined в PyQt5: QWebEngineView?
- 1 подписчик
- 07 мая
- 17 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как правильно задеплоить сайт на firebase hosting в бесплатном плане?
- 1 подписчик
- 07 мая
- 56 просмотров
1

ответ
Vue.js

Простой
Есть ли рекомендуемый порядок следования атрибутов во vue?
- 1 подписчик
- 07 мая
- 68 просмотров
2

ответа
Vue.js

Простой
Как переместить колонку с checkbox вправо, в компоненте QTable, Quasar?
- 1 подписчик
- 06 мая
- 61 просмотр
1

ответ
Vue.js

Средний
Как протестировать vue компонент на открытие модального окна через vitest?
- 1 подписчик
- 05 мая
- 37 просмотров
1

ответ
Node.js

+4 ещё

Средний
Как решить ошибку MaxListenersExceededWarning в Докере во время RUN npm install?
- 1 подписчик
- 03 мая
- 51 просмотр
2

ответа
Vue.js

Средний
Как исправить ошибки TypeError и getActivePinia() при тестировании в vitest?
- 1 подписчик
- 03 мая
- 26 просмотров
1

ответ
Vue.js

Средний
Есть ли способ запустить vite/vue приложение без сервера?
- 1 подписчик
- 02 мая
- 111 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как переназначить значение null в объект с явной структурой в TS Vue?
- 1 подписчик
- 01 мая
- 81 просмотр
1

ответ
Показать ещё Загружается…

Frontend-разработчик VUE (Senior, Middle+)

SOFT DIVISION • Ярославль

от 150 000 до 300 000 ₽

Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)

Donatov.net

от 100 000 до 300 000 ₽

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Доработка ИМ на 1С Битрикс

10 мая 2024, в 17:30

80000 руб./за проект

Требуется Java + Spring Boot специалист на разработку API-сервиса

10 мая 2024, в 17:14

2000 руб./за проект

Дописать скрипт

10 мая 2024, в 17:10

500 руб./за проект

height: 0 !important; вместо height: 0; тоже не помогает перебитьheight: 9vmin; Но почему если приоритет классов должен быть однаковым

Answer 1 · 2021-06-04 07:06:58

Все дело как раз в приоритете стилей.
Специфичность стилей перехода и самого блока одинаковая, а значить стиль определяется порядком следования правил.

Просто переместите определение перехода ниже блока.

Important в общем-то тоже сработает.

Почему transition-group анимирует прозрачность а не высоту?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт