From e57696d4ff296781b7307cbb8242fb3151500230 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sun, 17 Oct 2021 13:49:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BC=80=E5=85=B3=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E6=97=B6=E7=9A=84=E5=8A=A8=E7=94=BB=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                             |  1 +
 src/renderer/components/core/PlayerDetail.vue    | 16 +++++++++++-----
 .../components/material/MusicComment.vue         |  3 ++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 88c8c58d..7aa7a5b4 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -5,6 +5,7 @@
 ### 优化
 
 - 优化列表同步代码逻辑
+- 优化开关评论时的动画性能
 
 ### 修复
 
diff --git a/src/renderer/components/core/PlayerDetail.vue b/src/renderer/components/core/PlayerDetail.vue
index e1881d27..a271adf6 100644
--- a/src/renderer/components/core/PlayerDetail.vue
+++ b/src/renderer/components/core/PlayerDetail.vue
@@ -511,7 +511,8 @@ export default {
   min-height: 0;
   overflow: hidden;
   display: flex;
-  padding: 0 30px;
+  margin: 0 30px;
+  position: relative;
 
   &.showComment {
     .left {
@@ -527,13 +528,13 @@ export default {
       }
     }
     .comment {
-      flex-basis: 50%;
       opacity: 1;
+      transform: scaleX(1);
     }
   }
 }
 .left {
-  flex: 40%;
+  flex: 0 0 40%;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
@@ -698,9 +699,14 @@ export default {
 }
 
 .comment {
-  flex: 0 0 0;
-  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  opacity: 1;
   margin-left: 10px;
+  transform: scaleX(0);
 }
 
 .footer {
diff --git a/src/renderer/components/material/MusicComment.vue b/src/renderer/components/material/MusicComment.vue
index f13c74bd..1929c89f 100644
--- a/src/renderer/components/material/MusicComment.vue
+++ b/src/renderer/components/material/MusicComment.vue
@@ -185,7 +185,8 @@ export default {
   display: flex;
   flex-flow: column nowrap;
   transition: @transition-theme;
-  transition-property: flex-basis opacity;
+  transition-property: transform,opacity;
+  transform-origin: 100%;
   overflow: hidden;
 }
 .commentHeader {