Kaynağa Gözat

fix:竹谱叶子切换渐隐渐现

aamin 1 yıl önce
ebeveyn
işleme
cff585df40
2 değiştirilmiş dosya ile 25 ekleme ve 8 silme
  1. 21 3
      src/views/BambooBookScene2.vue
  2. 4 5
      src/views/BambooBookView.vue

+ 21 - 3
src/views/BambooBookScene2.vue

@@ -86,12 +86,30 @@ const {
           alt=""
         >
       </Transition>
-      <Transition name="fade-in">
+      <Transition name="fade-in-out">
         <img
-          v-show="curPart !== 0"
+          v-show="curPart == 1"
           class="detail-img"
           :style="{ width: x > 0.5 ? '100%' : '' }"
-          :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : curPart == 3 ? yeImg : moren"
+          :src=" ganImg"
+          alt=""
+        >
+      </Transition>
+      <Transition name="fade-in-out">
+        <img
+          v-show="curPart == 2"
+          class="detail-img"
+          :style="{ width: x > 0.5 ? '100%' : '' }"
+          :src=" zhiImg"
+          alt=""
+        >
+      </Transition>
+      <Transition name="fade-in-out">
+        <img
+          v-show="curPart == 3"
+          class="detail-img"
+          :style="{ width: x > 0.5 ? '100%' : '' }"
+          :src=" yeImg"
           alt=""
         >
       </Transition>

+ 4 - 5
src/views/BambooBookView.vue

@@ -56,7 +56,6 @@ const onSlideLeft = () => {
 }
 
 const isShowIndex3 = ref(false)
-//  :class="{ 'onRight1':curIndex == 0, 'onLeft1':curIndex == 1,'goLeft1': curIndex === 1, 'goRight1': curIndex === 0 }"
 
 
 </script>
@@ -125,7 +124,7 @@ const isShowIndex3 = ref(false)
     }
 
     .goLeft1 {
-      animation: on-left1 2s forwards;
+      animation: on-left1 1.5s forwards;
 
       @keyframes on-left1 {
         0% {
@@ -139,7 +138,7 @@ const isShowIndex3 = ref(false)
     }
 
     .goLeft2 {
-      animation: on-left2 2s forwards;
+      animation: on-left2 1.5s forwards;
 
       @keyframes on-left2 {
         0% {
@@ -153,7 +152,7 @@ const isShowIndex3 = ref(false)
     }
 
     .goRight1 {
-      animation: on-right1 2s forwards;
+      animation: on-right1 1.5s forwards;
 
       @keyframes on-right1 {
         0% {
@@ -167,7 +166,7 @@ const isShowIndex3 = ref(false)
     }
 
     .goRight2 {
-      animation: on-right2 2s forwards;
+      animation: on-right2 1.5s forwards;
 
       @keyframes on-right2 {
         0% {