element 上传文件组件-文件列表动画bug

今天想封装一个上传组件，用于本地选择文本文件后，前端直接将文本的内容给读取出来，然后提交这个拿到的文本内容。

所以，组件的作用就只是将文件转为文本。

bug

封装中我发现了一个bug，由于上传组件是自动上传的，所以我使用自定义上传覆盖默认上传方法。

然后再自定义上传方法中拿到文件，并读取到文本。

但是饿了么组件会默认将你选择的文件显示到文件列表中，也就是上面图上那个样子。并且会有动画

但是，如果我想要让它显示已上传，就是文件列表显示打勾，就需要对组件绑定的file-list数组push一个对象，对象里面有文件的name值，也就是如下：

this.fileList.push({name:"文件名"})

但是这样就会产生一个bug，列表的动画会将后面跟着的元素挤下去。

bug图

解决方法

找了半天发现没办法在js逻辑中解决这个问题，因为我是不需要上传，所以没有等待时间，所以组件自动插入一次动画，我手动又触发一次，导致这个问题。

没办法只能从css动手，百度了半天没有答案（百度真的越来越垃圾了）

最后谷歌找到一个方法：

 /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }
  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }

使用上面这段scss，阻止成功的动画，就能避免这个问题。