CN-1573 feat: 轨迹地图-追踪页时间轴开发

src/components/common/TimeLine.vue

@@ -63,7 +63,7 @@ export default {
           if (!markDom) {
             const childDiv = document.createElement('div')
             childDiv.className = 'time-line-mark'
-            childDiv.style.cssText += 'width: 0.5px;height: 40px;background: #000;margin-left: 18px;margin-top: -5px;'
+            childDiv.style.cssText += 'width: 0.5px;height: 40px;background: #000;margin-left: 18px;margin-top: -7px;'
             blockDom.appendChild(childDiv)
           }
         })
@@ -209,8 +209,8 @@ export default {
       if (this.timeLine[e]) {
         // 返回所选时间后一分钟
         const timeObj = {
-          startTime: this.timeLine[e].stamp,
-          endTime: this.timeLine[e].stamp - 60 * 1000
+          startTime: this.timeLine[e].stamp - 60 * 1000,
+          endTime: this.timeLine[e].stamp
         }
         this.$emit('change', timeObj)
       }
@@ -234,7 +234,7 @@ export default {
   .time-line-slider {
     position: absolute;
     width: 100%;
-    top: -8px;
+    top: -6px;
 
     :deep .el-slider__runway {
       //width: calc(100% - 18px);
@@ -251,7 +251,7 @@ export default {
         height: 0;
         border-color: #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
         border-style: solid;
-        border-width: 10px 10px 0 10px;
+        border-width: 8px 8px 0 8px;
         background-color: rgba(0, 0, 0, 0);
         border-radius: 0;
       }
@@ -261,7 +261,7 @@ export default {
   .time-line-container {
     height: 40px;
     line-height: 40px;
-    background-color: rgba(255, 255, 255, 0.60);
+    background-color: rgba(255, 255, 255, 0.50);
     //background-color: rgb(89, 173, 201);
     display: flex;
     justify-content: space-between;

src/components/common/collapse.vue

@@ -0,0 +1,112 @@
+<template>
+  <transition
+      :name="transitionName"
+      @before-enter="collapseBeforeEnter"
+      @enter="collapseEnter"
+      @after-enter="collapseAfterEnter"
+      @before-leave="collapseBeforeLeave"
+      @leave="collapseLeave"
+      @after-leave="collapseAfterLeave">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+/**
+ * 元素折叠过度效果
+ */
+export default {
+  name: 'CollapseTransition',
+  props: {
+    transitionName: {
+      type: String,
+      default: 'collapse-transition'
+    }
+  },
+  data () {
+    return {
+      oldPaddingTop: '',
+      oldPaddingBottom: '',
+      oldOverflow: ''
+    }
+  },
+  methods: {
+    collapseBeforeEnter (el) {
+      // console.log('11, collapseBeforeEnter')
+      this.oldPaddingBottom = el.style.paddingBottom
+      this.oldPaddingTop = el.style.paddingTop
+      // 过渡效果开始前设置元素的maxHeight为0，让元素maxHeight有一个初始值
+      el.style.paddingTop = '0'
+      el.style.paddingBottom = '0'
+      el.style.maxHeight = '0'
+    },
+    collapseEnter (el, done) {
+      // console.log('22, collapseEnter')
+      this.oldOverflow = el.style.overflow
+      const elHeight = el.scrollHeight
+      // 过渡效果进入后将元素的maxHeight设置为元素本身的高度，将元素maxHeight设置为auto不会有过渡效果
+      if (elHeight > 0) {
+        el.style.maxHeight = elHeight + 'px'
+      } else {
+        el.style.maxHeight = '0'
+      }
+      el.style.paddingTop = this.oldPaddingTop
+      el.style.paddingBottom = this.oldPaddingBottom
+
+      el.style.overflow = 'hidden'
+      const onTransitionDone = function () {
+        done()
+        el.removeEventListener('transitionend', onTransitionDone, false)
+        el.removeEventListener('transitioncancel', onTransitionDone, false)
+      }
+      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
+      el.addEventListener('transitionend', onTransitionDone, false)
+      el.addEventListener('transitioncancel', onTransitionDone, false)
+    },
+    collapseAfterEnter (el) {
+      // 过渡效果完成后恢复元素的maxHeight
+      el.style.maxHeight = ''
+      el.style.overflow = this.oldOverflow
+    },
+
+    collapseBeforeLeave (el) {
+      this.oldPaddingBottom = el.style.paddingBottom
+      this.oldPaddingTop = el.style.paddingTop
+      this.oldOverflow = el.style.overflow
+
+      el.style.maxHeight = el.scrollHeight + 'px'
+      el.style.overflow = 'hidden'
+    },
+    collapseLeave (el, done) {
+      if (el.scrollHeight !== 0) {
+        el.style.maxHeight = '0'
+        el.style.paddingBottom = '0'
+        el.style.paddingTop = '0'
+      }
+      const onTransitionDone = function () {
+        done()
+        el.removeEventListener('transitionend', onTransitionDone, false)
+        el.removeEventListener('transitioncancel', onTransitionDone, false)
+      }
+      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
+      el.addEventListener('transitionend', onTransitionDone, false)
+      el.addEventListener('transitioncancel', onTransitionDone, false)
+    },
+    collapseAfterLeave (el) {
+      el.style.maxHeight = ''
+      el.style.overflow = this.oldOverflow
+      el.style.paddingBottom = this.oldPaddingBottom
+      el.style.paddingTop = this.oldPaddingTop
+
+      this.oldOverflow = this.oldPaddingBottom = this.oldPaddingTop = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.collapse-transition-enter-active,
+.collapse-transition-leave-active {
+  transition: height .3s ease-in-out, padding .3s ease-in-out, max-height .3s ease-in-out;
+}
+</style>