upp

src/views/PaintingDetail.vue

@@ -3,13 +3,6 @@
     :id="`${direction ? 'myRowBox' : ''}`"
     class="hotspot-detail-2"
   >
-    <!--
-  WebkitClipPath:`rect(0 100% ${AnimationProgress.value}% 0)`,
-          clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
-        maxHeight:`${direction?'100':AnimationProgress.value}%`
-
-     -->
-
     <div
       id="painting-wrap-id"
       :class="`painting-wrap ${direction ? 'swiper-no-swiping' : ''} ${
@@ -25,7 +18,9 @@
       <div
         v-if="direction"
         class="myRowBoxImg"
-        :style="`height:${isAnimating ? AnimationProgress.value - 4 : 100}%`"
+        :style="`height:${
+          isOpenNow ? (isAnimating ? AnimationProgress - 4 : 100) : 100
+        }%`"
         @click="showBigPainting"
       >
         <div>
@@ -45,7 +40,7 @@
       <div
         v-if="!direction"
         class="shuBox"
-        :style="`height:${AnimationProgress.value}%`"
+        :style="`height:${isOpenNow ? AnimationProgress : 100}%`"
       >
         <img
           class="painting-border"
@@ -71,13 +66,15 @@
         </div>
       </div>
 
-
-      <Transition name="fade-out">
+      <Transition
+        v-if="isOpenNow"
+        name="fade-out"
+      >
         <img
           v-show="isAnimating"
           class="bottom-border-for-animation"
           :style="{
-            bottom: `${100 - AnimationProgress.value}%`,
+            bottom: `${100 - AnimationProgress}%`,
           }"
           src="@/assets/images/painting-border-bottom.png"
           alt=""
@@ -96,7 +93,7 @@
       class="desc-text"
       :class="{ 'desc-text-up': isUping }"
       :style="{
-        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+        opacity: isAnimating ? AnimationProgress / 100 : 1,
       }"
       @touchstart="handletouchstartUp"
       @touchend="touchEndUp"
@@ -167,27 +164,22 @@ import {
   computed,
   watch,
   onMounted,
-  inject,
-  onUnmounted,
   onBeforeUnmount,
+  onBeforeMount,
 } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import TWEEN from "@tweenjs/tween.js"
 import { api as viewerApi } from "v-viewer"
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject("$env")
-
 const emit = defineEmits(["close", "touch-up"])
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const props = defineProps({
+  // 是否是当前需要展开画轴的
+  isOpenNow: {
+    type: Boolean,
+    required: true,
+  },
   thumb: {
     type: String,
     required: true,
@@ -282,13 +274,13 @@ const isShowOperationTip = ref(true)
 const descTextEl = ref(null)
 const descTextElScrollTop = ref(0)
 onMounted(() => {
-  descTextEl.value.addEventListener("scroll", (e) => {
+  descTextEl.value.addEventListener("scroll", () => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
 
   // 判断图片是否是横向
 })
-const unwatch = watch(descTextElScrollTop, (v) => {
+const unwatch = watch(descTextElScrollTop, () => {
   isShowOperationTip.value = false
   unwatch()
 })
@@ -316,47 +308,27 @@ onBeforeUnmount(() => {
 const isAnimating = ref(true)
 
 /** 卷轴展开动画的tweening */
-const AnimationProgress = ref({
-  value: 7,
-})
+const AnimationProgress = ref(7)
 
-const isShowTipTop = ref(false)
+let timeAA = -1
 
-watch(AnimationProgress, (v) => {
-  if (v == 99) {
-    isShowTipTop.value = true
-    setTimeout(() => {
-      isShowTipTop.value = false
-    }, 1000)
-  }
-})
-const tween = new TWEEN.Tween(AnimationProgress.value)
-tween.to(
-  {
-    value: 100,
-  },
-  3000
-)
-tween.easing(TWEEN.Easing.Cubic.InOut)
-let animationRequestId = null
-const animate = () => {
-  animationRequestId = requestAnimationFrame(animate)
-  TWEEN.update()
-}
-// tween.onUpdate(function (object) {
-//   console.log(object.value)
-// })
 onMounted(() => {
-  tween.start()
-  animate()
-})
-tween.onComplete(() => {
-  isAnimating.value = false
-  cancelAnimationFrame(animationRequestId)
+  if (props.isOpenNow) {
+    timeAA = setInterval(() => {
+      if (AnimationProgress.value >= 99) {
+        clearInterval(timeAA)
+        isAnimating.value = false
+      }
+      AnimationProgress.value = AnimationProgress.value + 2
+    }, 30)
+  } else {
+    AnimationProgress.value = 100
+    isAnimating.value = false
+  }
 })
-onUnmounted(() => {
-  tween.stop()
-  cancelAnimationFrame(animationRequestId)
+
+onBeforeMount(() => {
+  clearInterval(timeAA)
 })
 
 /**
@@ -378,19 +350,6 @@ const isOversize = ref(sizeRatio > wrapSizeRatio)
 
 const paintingWrap2El = ref(null)
 const paintingEl = ref(null)
-onMounted(() => {
-  // if (isOversize.value && props.direction) {
-  //   setTimeout(() => {
-  //     const y =
-  //       (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) /
-  //       2
-  //     paintingWrap2El.value.scrollTo({
-  //       top: y,
-  //       // behavior: 'smooth',
-  //     })
-  //   }, 0)
-  // }
-})
 
 function showBigPainting() {
   viewerApi({
@@ -438,49 +397,65 @@ function showBigPainting() {
         width: 100%;
       }
       .painting-wrap-2 {
-      position: absolute;
-      left: 50%;
-      top: calc(
-        110 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      transform: translate(-50%, 0);
-      width: calc(
-        v-bind("paintingWrapWidth") / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      height: calc(
-        v-bind("paintingWrapHeight") / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      overflow: auto;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      > img.painting {
         position: absolute;
         left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 100%;
-      }
+        top: calc(
+          110 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        transform: translate(-50%, 0);
+        width: calc(
+          v-bind("paintingWrapWidth") / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        height: calc(
+          v-bind("paintingWrapHeight") / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        overflow: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        > img.painting {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+        }
 
-      > img.painting.oversize {
-        position: static;
-        left: initial;
-        top: initial;
-        transform: initial;
+        > img.painting.oversize {
+          position: static;
+          left: initial;
+          top: initial;
+          transform: initial;
+        }
       }
     }
-    }
-
 
     > img.bottom-border-for-animation {
       position: absolute;
       z-index: 100;
       left: 0;
       width: 100%;
+      -webkit-backface-visibility: hidden;
+
+      -moz-backface-visibility: hidden;
+
+      -ms-backface-visibility: hidden;
+
+      backface-visibility: hidden;
+
+      -webkit-perspective: 1000;
+
+      -moz-perspective: 1000;
+
+      -ms-perspective: 1000;
+
+      perspective: 1000;
+
+      /* Other transform properties here */
     }
   }
 

src/views/PaintingDetailList.vue

@@ -16,6 +16,7 @@
         <PaintingDetail
           v-show="index===indexAc"
           class="painting-item"
+          :is-open-now="index===Number(route.query.idx)"
           :thumb="`${$env.BASE_URL}configMultiMedia/paintings-small/${item['标题']}.jpg`"
           :title="item['标题（展示）']"
           :author="item['作者']"
@@ -28,6 +29,7 @@
           :can-close="false"
           :direction="item['方向']"
           :size="item['尺寸'] ? getPaintingSize(item['尺寸']):''"
+
           @touch-up="handletouchUp"
         >
           {{ item }}

src/views/ShuanggouPaintingDetail.vue

@@ -28,6 +28,7 @@
       >
         <PaintingDetail
           class="painting-item"
+          :is-open-now="true"
           :thumb="`${$env.BASE_URL}configMultiMedia/paintings-small/${item['标题']}.jpg`"
           :title="item['标题（展示）']"
           :author="item['作者']"