Bläddra i källkod

增加指法切换动画

liushengqiang 2 år sedan
förälder
incheckning
e17040f80e

+ 7 - 5
src/page-orchestra/detail/index.tsx

@@ -251,11 +251,13 @@ export default defineComponent({
 						</>
 					)}
 					{/* 指法 */}
-					{state.setting.displayFingering && state.fingeringInfo?.name && (
-						<div style={{ ...fingerConfig.value.fingerBox }}>
-							<Fingering />
-						</div>
-					)}
+					<Transition name={state.fingeringInfo.direction === "transverse" ? "v-slide-up" : "v-slide-right"}>
+						{state.setting.displayFingering && state.fingeringInfo?.name && (
+							<div style={{ ...fingerConfig.value.fingerBox }}>
+								<Fingering />
+							</div>
+						)}
+					</Transition>
 				</div>
 
 				{/* 插件 */}

+ 0 - 1
src/page-orchestra/evaluat-model/index.tsx

@@ -180,7 +180,6 @@ export default defineComponent({
 				handleStartEvaluat();
 			} else if (type === "tryagain") {
 				// 再来一次
-				handleStartBegin();
 			}
 			evaluatingData.resulstMode = false;
 		};

+ 23 - 1
src/style.css

@@ -71,4 +71,26 @@
   padding: 4px;
   font-size: 16px;
   color: var(--van-primary-color);
-}
+}
+
+/* 动画右滑进入 */
+.v-slide-right-enter-from,
+.v-slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.v-slide-right-enter-active,
+.v-slide-right-leave-active {
+  transition: all 0.3s;
+}
+
+/* 上滑进入 */
+.v-slide-up-enter-from,
+.v-slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+.v-slide-up-enter-active,
+.v-slide-up-leave-active {
+  transition: all 0.3s;
+}

+ 1 - 0
src/view/music-score/index.module.less

@@ -12,6 +12,7 @@
         & > div {
             transform: scale(var(--music-zoom));
             transform-origin: left top;
+            transition: all .3s;
         }
         svg{
             overflow: visible;

+ 1 - 0
src/view/selection/index.module.less

@@ -3,6 +3,7 @@
     left: 0;
     top: 0;
     right: 0;
+    z-index: 2;
 }
 
 .position {