简单的左下角弹窗实现（多个）

效果：页面左下角根据数据弹出固定的n条数据（这里我是五条）

 难点一：这里我弹出效果只是整体的从下往上移动的效果，由于数据量多，一条条层出不穷也不是很好看

实现办法：

这里由于动态数据我给item里的一个值 随便赋了俩值用于判断，从而使弹窗隐藏和弹窗样式的变换。 如下图 item.is_known == n ？

@keyframes 

 <div class="mask">
      <div class="river">
        <div :class="item.is_known == 2 ? 'popup conceal' : 'popup '" v-for="item in list" :key="item.id" v-show="item.is_known == 1 ? false : true">
          <div class="over" @click="over(item)">关闭</div>
          <div class="image" v-if="item.type == 'data' ? true : false"><img src="../../../../assets/img/exclamation.png" alt="" /></div>
          <div class="image" v-else><img src="../../../../assets/img/exclamation_y.png" alt="" /></div>
          <div class="title">{{ item.type == 'data' ? '数据报警' : '设备离线' }}</div>
          <div class="info">
            <div class="text">监测点: {{ item.monitor_position.position }}</div>
            <div class="text">报警时间: {{ item.time }}</div>
            <div class="text">设备号: {{ item.device_code }}</div>
          </div>
        </div>
      </div>
    </div>

css:

 .popup {
      overflow: hidden;
      position: relative;
      margin-top: 10px;
      width: 300px;
      height: 150px;
      background-color: #062b44;
      animation: mymove 2s;
      // 这里起的名字mymove
      opacity: 1;
      .over {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 25px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #313c4e;
        cursor: pointer;
      }
    }

@keyframes mymove {
      0% {
        top: 150px;
      }
      100% {
        top: 0px;
      }
    }

 难点二：点击关闭后，弹窗渐渐消失的效果。

这个逻辑是点关闭 先弹出是否关闭弹窗（确保数据不被乱删） 随后调用接口 

注意：调用接口成功后 要先改变样式 ，再关闭弹窗。 这样才是有 淡淡的关闭的效果（这里淡淡关闭的效果我是用透明度 1——0 ， 加类名实现 ，注意css权重问题） 

setTimeout用于解决先样式 后 关闭

点击关闭时 调用的方法代码：

over(item) {
      this.$confirm('此操作将关闭当前报警, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let id = item.id
          let url = `/api/xxxxxxxx/${id}/xxxx/`
          this.$axios.post(url).then(
            () => {
              this.$message({
                type: 'success',
                message: '关闭成功!'
              })
              item.is_known = 2
              setTimeout(() => {
                item.is_known = 1
              }, 800)
            },
            err => {
              handleError(this, err.data)
            }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关闭'
          })
        })
    },