Why transition-group doesn't work in cli but works in cdn?

D

dominy2021-07-11 19:43:33

Vue.js

dominy, 2021-07-11 19:43:33

Hello, from the documentation I took an example of transition-group with v-for in cdn, it animates perfectly for both creating and deleting an element

<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</header>

<body>
  <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>
  <style>
    .list-item {
      display: inline-block;
      margin-right: 10px;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
  </style>
</body>
<script>
  new Vue({
    el: '#list-demo',
    data: {
      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>

But when I rewrote the code for the component, the removal still animates but the creation doesn't. Why does it happen like this

<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 {
  name: "HelloWorld",
  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">
.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
  transition: all 1s;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2021-07-11
@dominy

deal with the vue version you are using