vue mesh transition animation

refer to

https://cn.vuejs.org/v2/guide/transitions.html#List transitions

Effect

 

The parent element can use grid layout and flex layout. For flex layout, you need to set the width of the parent element, and then use flex-wrap to achieve the purpose of a multi-line grid

Note that elements that use FLIP transitions cannot be set to  display: inline . As an alternative, can be set to  display: inline-block or placed in flex

Notice

The transition-group is a span package by default, and no styles are used. You need to set tags and styles, otherwise there will be problems

      <transition-group>
        <div class="cell" v-for="i in items" :key="i">{{i}}</div>
      </transition-group>

Element layout is not as expected

source code

<template>
  <div>
    <button v-on:click="shuffle">Shuffle</button>
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>

    <div class="grid">
      <transition-group name="cells" tag="div" class="grid">
        <div class="cell" v-for="i in items" :key="i">{{i}}</div>
      </transition-group>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: "t5",
    data() {
      return {
        items: Array.from(Array(9)).map((_, index) => index),
        nextNum: 10
      }
    },
    methods: {
      randomIndex: function () {
        return Math.floor(Math.random() * this.items.length)
      },
      add: function () {
        // this.items[0].push(parseInt(Math.random() * 100))
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove: function () {
        this.items.splice(this.randomIndex(), 1)
      },
      shuffle: function () {
        this.items = _.shuffle(this.items)

      }
    },
  }
</script>

<style scoped>

  /*
  .grid {*/
  /*display: grid;*/
  /*width: 311px;*/
  /*grid-template-columns: 1fr 1fr 1fr;*/
  /*}
  */
  .grid {
    display: flex;
    flex-wrap: wrap;
    width: 311px;
  }

  .cell {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
  }

  /*过渡时间*/
  .cells-move {
    transition: transform 1s;
  }

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

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