vue 网格 过渡 动画

原文链接: vue 网格 过渡 动画

上一篇: html img 图片缩放

下一篇: vue 拼数字小游戏（设置表白彩蛋）

参考

https://cn.vuejs.org/v2/guide/transitions.html#列表过渡

效果

父元素可以使用grid布局和flex布局，对于flex布局而言需要设置父元素宽度，然后使用flex-wrap 来达到实现一个多行网格的目的

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

注意

transition-group  默认是span包裹，且没有使用样式，需要设置tag和样式，否则会有问题

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

元素布局与希望的并不相符

源码

<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>