修改图例动画功能

chenzeping

2021-03-08 3cc9f0efa740810f88738788b062f348d8d9b48a

 src/components/panel/LegendPanel.vue

@@ -6,7 +6,7 @@
    </div>
    <transition name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
          <ul>
            <li v-for="(ite,inde) in item.items" :key="inde">
@@ -206,11 +206,12 @@
  methods: {
    // 图标 控制内容的展示与隐藏
    legendChange () {
      if (this.legendControl === false) {
        this.legendControl = true
      } else {
        this.legendControl = false
      }
      // if (this.legendControl === false) {
      //   this.legendControl = true
      // } else {
      //   this.legendControl = false
      // }
      this.legendControl = !this.legendControl
    }
  }
}
@@ -242,9 +243,9 @@
      transform: scale(0);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.2);
    }
    //50% {
    //  transform: scale(1.1);
    //}
    100% {
      transform: scale(1);
      opacity: 1;
@@ -252,13 +253,15 @@
  }

  .fade-enter-active {
    transform-origin: right center;
    animation: bounce-in 1s;
    transform-origin: right bottom;
    animation: bounce-in .5s;
  }

  .fade-leave-active {
    transform-origin: left center;
    transform-origin: right;
    animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

  .legend-content {
@@ -270,7 +273,7 @@
    border-radius: 1rem;
    background: #3c7699;

    .legend-content-centent {
    .legend-content-box {
      p {
        text-align: center;
        color: #ffffff;
@@ -300,7 +303,6 @@
          span {
            font-size: 12px;
            color: white;
            //width: 80%;
          }
        }
      }
@@ -312,10 +314,6 @@
      margin-block-start: 0.5rem;
      margin-block-end: 0;
    }

    //.under-line:last-child {
    //  display: none;
    //}
  }
}
</style>