常用的Vue列表transition动画

List的item增加、移除动作的动画

虽然官网有类似动画，但是并不是我今天想说的动画。

横向移除

上图是横向移除的动画，而横向添加动画效果是从左平移入屏幕，下面的item让位，我就不再录制动画了。

竖向移除

上图是竖向移除的动画，而竖向增加是竖向移除的反动画，我就不再录制动画了。

实现动画的方法：

<template>
  <div id="app">
    <img
      style="width: 20%;"
      alt="Vue logo"
      src="./assets/logo.png"
      @click="click"
    />
    <transition-group name="list-complete" class="container">
      <div v-for="item in list" :key="item" class="item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    };
  },
  methods: {
    click() {
      this.list.splice(3, 1);
    }
  }
};
</script>

<style>
.container {
  display: block;
  position: relative;
}

.item {
  transition: all 0.5s;
  margin: 20px;
  text-align: center;
  border: 1px solid #eee;
}

.list-complete-enter,
.list-complete-leave-to {
  opacity: 0;
  transform: translateX(-100%) translateY(-100%);
  /* transform: translate(none, -100%); */
}

.list-complete-leave-active {
  position: absolute;
  left: 0;
  right: 0;
}
</style>

核心代码：

.container类的两个声明是必须的，因为它默认是inline，而且为了给item当参照祖先，所以必须设relative。
item的样式的关键是transition: all 0.5s;，其他不是关键。
.list-complete-enter、.list-complete-leave-to的transform: translateX(-100%) translateY(-100%);保证左向平移。如果是竖向动画，则应改成transform: translate(none, -100%);。
.list-complete-leave-active的三行声明都是必须的，这保证item占据全宽。

如果想写成SCSS工具类，可以这么写：

@each $dir in (x,y) {
  .list-#{$dir}-ani {
    display: block;
    position: relative;

    > * {
      transition: all 0.5s;
    }

    .list-#{$dir}-ani-enter,
    .list-#{$dir}-ani-leave-to {
      opacity: 0;
      @if $dir == x {
        transform: translateX(-100%) translateY(-100%);
      }
      @else {
        transform: translate(none, -100%);
      }
    }
    .list-#{$dir}-ani-leave-active {
      position: absolute;
      left: 0;
      right: 0;
    }
  }
}

用法：

想x轴动画就list-x-ani，想y轴动画就list-y-ani。

name和class用一样的值。.item负责与动画无关的其他声明。

    <transition-group name="list-x-ani" class="list-x-ani">
      <div v-for="item in list" :key="item" class="item">
        {{ item }}
      </div>
    </transition-group>