Why does transition-group animate transparency and not height?

W

WEDLEYM2021-06-04 04:27:24

Vue.js

WEDLEYM, 2021-06-04 04:27:24

Hello, this code perfectly animates the change in transparency when an array element is removed, but why is the height not animated...

<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey delphinpro, 2021-06-04
@WEDLEYM

It's all about style priority.
The specificity of the styles of the transition and the block itself is the same, and therefore the style is determined by the order of the rules.
Just move the transition definition below the block.
snippet
Important will generally work too.