部分调整

shuishen

2022-04-11 99dc0cc2172ac8bc267e85435195318e40f03595

 src/views/hd/getMapDataInThere.vue

@@ -1,495 +1,493 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="controlMapWindow">
      <div class="controlMapWindowTitle">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-finished"
            @click="openDrawLineMethod"
            :disabled="fromView"
            >新增路线</el-button
          >
          <el-button
            type="primary"
            @click="openDrawPointMethod"
            icon="el-icon-coordinate"
            :disabled="fromView"
            >新增标点</el-button
          >
        </el-button-group>
      </div>
      <div class="controlMapWindowmain">
        <transition-group
          :name="animateName"
          :enter-active-class="animateEnter"
          :leave-active-class="animateLeave"
        >
          <div
            class="getMapData__once"
            v-for="(item, index) in ourDatas"
            :key="index"
          >
            <div class="getMapData_once_label">
              <el-tag> {{ item.label }}</el-tag>
    <div class="getMapData" :key="Refresh">
        <MapInThere ref="getMapDataRefs" />
        <div class="controlMapWindow">
            <div class="controlMapWindowTitle">
                <el-button-group>
                    <el-button
                        type="primary"
                        icon="el-icon-finished"
                        @click="openDrawLineMethod"
                        :disabled="fromView"
                    >新增路线</el-button>
                    <el-button
                        type="primary"
                        @click="openDrawPointMethod"
                        icon="el-icon-coordinate"
                        :disabled="fromView"
                    >新增标点</el-button>
                </el-button-group>
            </div>
            <el-input
              :class="[
            <div class="controlMapWindowmain">
                <transition-group
                    :name="animateName"
                    :enter-active-class="animateEnter"
                    :leave-active-class="animateLeave"
                >
                    <div class="getMapData__once" v-for="(item, index) in ourDatas" :key="index">
                        <div class="getMapData_once_label">
                            <el-tag>{{ item.label }}</el-tag>
                        </div>
                        <el-input
                            :class="[
                'getMapData_once_name',
                item.notPath == 2 ? 'notPath' : '',
              ]"
              @blur="myRules(index)"
              v-model="item.name"
              placeholder="请输入路径名称"
              :disabled="fromView"
            ></el-input>
            <transition
              :name="animateNames"
              :enter-active-class="animateEnters"
              :leave-active-class="animateLeaves"
            >
              <div class="notPathTitile" v-show="item.notPath == 2">
                请输入名称或选择路径
              </div>
            </transition>
            <el-button
              class="getMapData_once_get"
              :type="item.value ? 'success' : 'primary'"
              :title="item.value ? '重新选择' : '点击选择'"
              :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
              @click="openMap(item.label, index, item.value)"
              :disabled="MapDataShow || fromView"
            ></el-button>
            <el-button
              class="getMapData_once_endBut"
              icon="el-icon-delete"
              circle
              @click="deleteRowOurs(index)"
              :disabled="MapDataShow || fromView"
            ></el-button>
          </div>
        </transition-group>
      </div>
                            @blur="myRules(index)"
                            v-model="item.name"
                            placeholder="请输入路径名称"
                            :disabled="fromView"
                        ></el-input>
                        <transition
                            :name="animateNames"
                            :enter-active-class="animateEnters"
                            :leave-active-class="animateLeaves"
                        >
                            <div class="notPathTitile" v-show="item.notPath == 2">请输入名称或选择路径</div>
                        </transition>
                        <el-button
                            class="getMapData_once_get"
                            :type="item.value ? 'success' : 'primary'"
                            :title="item.value ? '重新选择' : '点击选择'"
                            :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
                            @click="openMap(item.label, index, item.value)"
                            :disabled="MapDataShow || fromView"
                        ></el-button>
                        <el-button
                            class="getMapData_once_endBut"
                            icon="el-icon-delete"
                            circle
                            @click="deleteRowOurs(index)"
                            :disabled="MapDataShow || fromView"
                        ></el-button>
                    </div>
                </transition-group>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
import { mapGetters } from "vuex"
import MapInThere from "@/components/map/mainInThere.vue"
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        // console.log("深度监听：", val);
    name: "getMapData",
    components: {
        MapInThere,
    },
    computed: {
        ...mapGetters(["rotesData", "pointData"]),
    },
    watch: {
        ourDatas: {
            handler (val) {
                // console.log("深度监听：", val);
                this.checkDom("getMapDataRefs", (dom) => {
                    dom.onceOnlodad(val)
                })
            },
            deep: true,
        },
    },
    data () {
        return {
            Refresh: false,
            // routers: [
            //   {
            //     label: "路径1",
            //     value: "",
            //     routerName: "",
            //     notPath: true,
            //   },
            // ],
            // potions: [
            //   {
            //     label: "标点1",
            //     value: "",
            //     potionName: "",
            //     notPath: true,
            //   },
            // ],
            //动画效果
            animateName: "custom-classes-transition",
            animateEnter: "animated fadeIn",
            animateLeave: "animated fadeOut",
            //未输入动画效果
            animateName: "custom-classes-transition",
            animateEnter: "animated fadeInDown",
            animateLeave: "animated fadeOut",
            openTitle: "路径1",
            MapDataShow: false,
            fromView: false,
            ourDatas: [
                // {
                //   label: "路径2",
                //   value:
                //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
                //   name: "xxx2",
                //   notPath: false,
                //   isLine: true,
                //   id: 2,
                // },
                // {
                //   label: "路径3",
                //   value:
                //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
                //   name: "xxx3",
                //   notPath: false,
                //   isLine: true,
                //   id: 3,
                // },
                // {
                //   label: "标点4",
                //   value: [114.03887343706977, 27.63000553765213],
                //   name: "喜迎校庆选点1",
                //   notPath: false,
                //   isLine: false,
                //   id: 4,
                // },
            ],
            nowId: 0,
        }
    },
    mounted () {
        // this.$emit("setMapData", [this.routers, this.potions]);
        let that = this
        if (that.ourDatas.length != 0) {
            for (let k in that.ourDatas) {
                that.ourDatas[k].id = +k + 1
            }
        }
        //判断dom是否存在
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true,
            //提供数据
            dom.onceOnlodad(that.ourDatas)
        })
        this.nowId = +this.ourDatas.length + 1
    },
  },
  data() {
    return {
      Refresh: false,
      // routers: [
      //   {
      //     label: "路径1",
      //     value: "",
      //     routerName: "",
      //     notPath: true,
      //   },
      // ],
      // potions: [
      //   {
      //     label: "标点1",
      //     value: "",
      //     potionName: "",
      //     notPath: true,
      //   },
      // ],
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      //未输入动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeInDown",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [
        // {
        //   label: "路径2",
        //   value:
        //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
        //   name: "xxx2",
        //   notPath: false,
        //   isLine: true,
        //   id: 2,
        // },
        // {
        //   label: "路径3",
        //   value:
        //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
        //   name: "xxx3",
        //   notPath: false,
        //   isLine: true,
        //   id: 3,
        // },
        // {
        //   label: "标点4",
        //   value: [114.03887343706977, 27.63000553765213],
        //   name: "喜迎校庆选点1",
        //   notPath: false,
        //   isLine: false,
        //   id: 4,
        // },
      ],
      nowId: 0,
    };
  },
  mounted() {
    // this.$emit("setMapData", [this.routers, this.potions]);
    let that = this;
    if (that.ourDatas.length != 0) {
      for (let k in that.ourDatas) {
        that.ourDatas[k].id = +k + 1;
      }
    }
    //判断dom是否存在
    this.checkDom("getMapDataRefs", (dom) => {
      //提供数据
      dom.onceOnlodad(that.ourDatas);
    });
    this.nowId = +this.ourDatas.length + 1;
  },
  methods: {
    openDrawLineMethod() {
      //添加线路的对象
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        //notpath判断是否验证通过的提示 2 为不通过
        isLine: true,
        //isLine来判断是否是线
        id: +id,
        //id确定不重复
      });
    },
    openDrawPointMethod() {
      //添加点的对象
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id,
      });
    },
    deleteRowOurs(index) {
      //删除
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      //在地图内useMapData方法中触发
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      //开始对地图做操作
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      // console.log(line, point);
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        // console.log(errorId, "errorId");
        for (let x in this.ourDatas) {
          // console.log(this.ourDatas[x], "x");
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
    methods: {
        openDrawLineMethod () {
            //添加线路的对象
            let id = this.nowId++
            this.ourDatas.push({
                label: "路径" + +id,
                value: "",
                name: "",
                notPath: false,
                //notpath判断是否验证通过的提示 2 为不通过
                isLine: true,
                //isLine来判断是否是线
                id: +id,
                //id确定不重复
            })
        },
        openDrawPointMethod () {
            //添加点的对象
            let id = this.nowId++
            this.ourDatas.push({
                label: "标点" + +id,
                value: "",
                name: "",
                notPath: false,
                isLine: false,
                id: +id,
            })
        },
        deleteRowOurs (index) {
            //删除
            this.ourDatas.splice(index, 1)
        },
        backMapDataOurData (val, index) {
            //在地图内useMapData方法中触发
            if (val == "line") {
                this.ourDatas[index].value = this.rotesData
            } else if (val == "point") {
                this.ourDatas[index].value = this.pointData
            } else if (val == "notData") {
                this.ourDatas[index].value = ""
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        // console.log("通过");
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      // console.log(item, names, 7777);
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            // console.log(kin);
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
            //单个验证
            this.myRules(index)
        },
        //以上是添加数据集方法
        //选择map数据
        openMap (val, num, value) {
            //开始对地图做操作
            this.MapDataShow = true
            this.openTitle = val
            this.$refs.getMapDataRefs.init(val, num, value)
        },
        closeOpenedMap () {
            this.MapDataShow = false
            // this.openTitle = "";
        },
        //下面是旧代码
        editInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
        },
        viewInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
            this.fromView = true //查看数据不可改
        },
        reverseMapData (val, label) {
            //解释数据
            let rname = val[0][0].split(";"),
                r = val[0][1].split(";"),
                pname = val[1][0].split(";"),
                p = val[1][1].split(";")
            this.ourDatas = []
            for (let k in r) {
                this.ourDatas.push({
                    label: "路径" + (+k + 1),
                    value: r[k],
                    name: rname[k],
                    notPath: false,
                    isLine: true,
                    id: this.ourDatas.length,
                })
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            for (let k in p) {
                let potion = p[k].split(",")
                this.ourDatas.push({
                    label: "标点" + (+k + 1),
                    value: [+potion[0], +potion[1]],
                    name: pname[k],
                    notPath: false,
                    isLine: false,
                    id: this.ourDatas.length,
                })
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
            this.nowId = +this.ourDatas.length + 1
        },
        myRules (index) {
            //单个验证
            if (this.ourDatas[index].name && this.ourDatas[index].value) {
                this.ourDatas[index].notPath = false
            } else {
                this.ourDatas[index].notPath = 2
            }
        },
        //自定义验证
        myRulesUse () {
            //把一个数组拆开两个来对应之前的数据
            let ourData = this.ourDatas
            let lineBefor = []
            let pointBefor = []
            for (let o in ourData) {
                if (ourData[o].isLine) {
                    lineBefor.push(ourData[o])
                } else {
                    pointBefor.push(ourData[o])
                }
            }
            let line = this.changeMapData(lineBefor, "name")
            let point = this.changeMapData(pointBefor, "name")
            // console.log(line, point);
            if (line[0] == "namenot" || point[0] == "namenot") {
                //需要显示验证失败合集
                let errorId = []
                if (line[0] == "namenot") {
                    errorId.push(...line[1])
                }
                if (point[0] == "namenot") {
                    errorId.push(...point[1])
                }
                // console.log(errorId, "errorId");
                for (let x in this.ourDatas) {
                    // console.log(this.ourDatas[x], "x");
                    let flog = true
                    for (let k in errorId) {
                        if (errorId[k] == this.ourDatas[x].id) {
                            flog = false
                        }
                    }
                    if (flog) {
                        this.ourDatas[x].notPath = false
                    } else {
                        this.ourDatas[x].notPath = 2
                    }
                }
                return false
            } else {
                // console.log("通过");
                for (let i in this.ourDatas) {
                    this.ourDatas[i].notPath = false
                }
                return [line, point]
            }
        },
        //规则
        changeMapData (item, names) {
            let name = "",
                value = "",
                notData = []
            let itemLength = item.length - 1
            // console.log(item, names, 7777);
            for (let k in item) {
                let inItem = item[k]
                for (let kin in inItem) {
                    if (
                        inItem[kin] == "" &&
                        kin != "notPath" &&
                        kin != "isLine" &&
                        kin != "id"
                    ) {
                        // console.log(kin);
                        notData.push(inItem.id)
                        break
                    }
                    if (kin == names) {
                        name += inItem[kin]
                        if (k != itemLength) {
                            name += ";"
                        }
                    }
                    if (kin == "value") {
                        value += inItem[kin]
                        if (k != itemLength) {
                            value += ";"
                        }
                    }
                }
            }
            return notData.length > 0 ? [names + "not", notData] : [name, value]
        },
        checkDom (name, fn) {
            //  声明定时器
            let that = this
            var timer = null
            //  检查dom是否执行完成
            function checkDom () {
                let dom = that.$refs[name]
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        //回调函数
                        fn(dom)
                        return
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }
            //  首次执行
            checkDom()
        },
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindow {
    width: 320px;
    height: calc(100% - 20px);
    // border: 1px solid red;
    // box-shadow: 2px 0 15px 2px #acacac;
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #fff;
    border-radius: 0 15px 15px 0;
    padding: 10px 10px;
    overflow: hidden;
    .controlMapWindowTitle {
      height: 40px;
      width: 100%;
      margin-bottom: 5px;
      @extend .flexCenter;
    width: 100%;
    height: 100%;
    position: relative;

    .controlMapWindow {
        width: 320px;
        height: calc(100% - 20px);
        // border: 1px solid red;
        // box-shadow: 2px 0 15px 2px #acacac;
        position: absolute;
        left: 10px;
        top: 10px;
        background-color: #fff;
        border-radius: 0 15px 15px 0;
        padding: 10px 10px;
        overflow: hidden;

        .controlMapWindowTitle {
            height: 40px;
            width: 100%;
            margin-bottom: 5px;
            @extend .flexCenter;
        }

        .controlMapWindowmain {
            width: 100%;
            height: calc(100% - 45px);
            overflow-x: hidden;
            overflow-y: scroll;
            .getMapData_left {
                width: 50%;
                height: 40px;
                box-sizing: border-box;
            }
            .getMapData_right {
                width: 50%;
                height: 40px;
                box-sizing: border-box;
            }
            .getMapData__once {
                width: 100%;
                height: 40px;
                margin-bottom: 10px;
                position: relative;
                @extend .flexCenter;
                flex-direction: row;
                .getMapData_once_label {
                    padding-left: 15px;
                    width: 90px;
                    height: 100%;
                    @extend .flexCenter;
                    justify-content: space-around;
                }
                .getMapData_once_name {
                    width: calc(100% - 130px);
                }
                .getMapData_once_get {
                    padding: 6px 16px;
                    font-size: 20px;
                }
                .notPathTitile {
                    position: absolute;
                    left: 90px;
                    bottom: -20px;
                    color: red;
                    font-size: 1px;
                }
            }
        }
    }
    .controlMapWindowmain {
      width: 100%;
      height: calc(100% - 45px);
      overflow-x: hidden;
      overflow-y: scroll;
      .getMapData_left {
        width: 50%;
        height: 40px;
        box-sizing: border-box;
      }
      .getMapData_right {
        width: 50%;
        height: 40px;
        box-sizing: border-box;
      }
      .getMapData__once {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;
        position: relative;
        @extend .flexCenter;
        flex-direction: row;
        .getMapData_once_label {
          padding-left: 15px;
          width: 90px;
          height: 100%;
          @extend .flexCenter;
          justify-content: space-around;
        }
        .getMapData_once_name {
          width: calc(100% - 130px);
        }
        .getMapData_once_get {
          padding: 6px 16px;
          font-size: 20px;
        }
        .notPathTitile {
          position: absolute;
          left: 90px;
          bottom: -20px;
          color: red;
          font-size: 1px;
        }
      }
    // 验证
    .notPath {
        // border-bottom: 0.5px solid red;
    }
  }
  // 验证
  .notPath {
    // border-bottom: 0.5px solid red;
  }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
    opacity: 0;
    transform: translateY(10px);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
    opacity: 0;
    transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
    opacity: 1;
}
​ .list-enter-active,

// ​.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
    transition: all 0.3s;
}
</style>