vue中过度动画之列表添加删除动画实现

思路：

1. 完成页面结构及 添加数据和删除数据逻辑
2. 包裹列表使用transition-group标签，将该有的类名加上。这样写了效果是有了，但是过渡比较生硬，如何让它平滑一点？
3. 加v-move类名

<style>
      .slide-enter, .slide-leave-to {

      }
      .slide-leave, .slide-enter-to {

      }
      .slide-enter-active {
        animation: slide-in 2s ease-out;
      }
      .slide-leave-active {
        animation: slide-out 2s ease-out;
        /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
        position: absolute;
      }
      /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
      .slide-move {
        transition: all 2s;
      }

      @keyframes slide-in {
        from {
          transform: translateY(50px)
        }
        to {
          transform: translateY(0)
        }
      }
      @keyframes slide-out {
        from {
          transform: translateY(0)
        }