@WEDLEYM

Почему 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>
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Все дело как раз в приоритете стилей.
Специфичность стилей перехода и самого блока одинаковая, а значить стиль определяется порядком следования правил.

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



Important в общем-то тоже сработает.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы