From 10784e95bb31706a9547ddc084c6dac289a4f094 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 4 Oct 2019 10:13:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=80=89=E6=8B=A9=E6=A1=86?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |   4 +
 src/renderer/components/material/Checkbox.vue | 112 +++++++++---------
 .../material/DownloadMultipleModal.vue        |   2 +-
 3 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 1ac450ed..4fb19167 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,7 @@
 #### 新增
 
 - 新增“我的收藏”本地播放列表
+
+#### 优化
+
+- 优化选择框动画效果
diff --git a/src/renderer/components/material/Checkbox.vue b/src/renderer/components/material/Checkbox.vue
index 44a0932b..c156dc27 100644
--- a/src/renderer/components/material/Checkbox.vue
+++ b/src/renderer/components/material/Checkbox.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
 div(:class="$style.checkbox")
-  input(:type="need ? 'radio' : 'checkbox'" :id="id" :disabled="disabled" :value="value" :name="name" @change="change" v-model="bool")
+  input(:type="need ? 'radio' : 'checkbox'" :class="$style.input" :id="id" :disabled="disabled" :value="value" :name="name" @change="change" v-model="bool")
   label(:for="id" :class="$style.content")
-    div(v-if="indeterminate")
+    div(v-if="indeterminate" :class="$style.container")
       svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
         use(xlink:href='#icon-check-indeterminate')
       svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
         use(xlink:href='#icon-check-true')
-    div(v-else)
-      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
+    div(v-else :class="$style.container")
+      svg(version='1.1' :class="$style.icon" xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
         use(xlink:href='#icon-check-true')
-    span(v-if="label != null" v-html="label")
+    span(v-if="label != null" v-html="label" :class="$style.label")
 </template>
 
 <script>
@@ -113,25 +113,25 @@ export default {
   display: inline-block;
   // font-size: 56px;
 
-  > input {
-    display: none;
-    &[disabled] {
-      + .content {
-        opacity: .5;
-      }
+}
+.input {
+  display: none;
+  &[disabled] {
+    + .content {
+      opacity: .5;
     }
-    &:checked {
-      + .content {
-        > div {
-          &:after {
-            border-color: @color-theme;
-          }
-          svg {
-            transform: scale(1);
-            opacity: 1;
-          }
+  }
+  &:checked {
+    + .content {
+      .container {
+        &:after {
+          border-color: @color-theme;
         }
       }
+      .icon {
+        transform: scale(1);
+        // opacity: 1;
+      }
     }
   }
 }
@@ -139,41 +139,41 @@ export default {
   display: flex;
   justify-content: center;
 
-  > div {
-    flex: none;
-    position: relative;
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    cursor: pointer;
-    display: flex;
-    color: @color-theme;
-    // border: 1px solid #ccc;
-    &:after {
-      position: absolute;
-      content: ' ';
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border: 1px solid @color-theme_2-font-label;
-      transition: border-color 0.2s ease;
-      border-radius: 15%;
-    }
-    svg {
-      transition: 0.2s ease;
-      transition-property: transform, opacity;
-      transform: scale(0.5);
-      opacity: 0;
-    }
+}
+.container {
+  flex: none;
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  cursor: pointer;
+  display: flex;
+  color: @color-theme;
+  // border: 1px solid #ccc;
+  &:after {
+    position: absolute;
+    content: ' ';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 1px solid @color-theme_2-font-label;
+    transition: border-color 0.2s ease;
+    border-radius: 15%;
   }
+}
+.icon {
+  transition: 0.3s ease;
+  transition-property: transform;
+  transform: scale(0);
+  // opacity: 0;
+}
 
-  > span {
-    flex: auto;
-    line-height: 1;
-    margin-left: 5px;
-    cursor: pointer;
-  }
+.label {
+  flex: auto;
+  line-height: 1;
+  margin-left: 5px;
+  cursor: pointer;
 }
 
 each(@themes, {
@@ -182,7 +182,7 @@ each(@themes, {
       > input {
         &:checked {
           + .content {
-            > div {
+            .container {
               &:after {
                 border-color: ~'@{color-@{value}-theme}';
               }
@@ -192,7 +192,7 @@ each(@themes, {
       }
     }
     .content {
-      > div {
+      .container {
         color: ~'@{color-@{value}-theme}';
         // border: 1px solid #ccc;
         &:after {
diff --git a/src/renderer/components/material/DownloadMultipleModal.vue b/src/renderer/components/material/DownloadMultipleModal.vue
index 705793c4..d9721c69 100644
--- a/src/renderer/components/material/DownloadMultipleModal.vue
+++ b/src/renderer/components/material/DownloadMultipleModal.vue
@@ -7,7 +7,7 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
       | 请选择要优先下载的音质
     material-btn(:class="$style.btn" @click="handleClick('128k')") 普通音质 - 128K
     material-btn(:class="$style.btn" @click="handleClick('320k')") 高品音质 - 320K
-    material-btn(:class="$style.btn" @click="handleClick('ape')") 无损音质 - APE
+    //- material-btn(:class="$style.btn" @click="handleClick('ape')") 无损音质 - APE
     material-btn(:class="$style.btn" @click="handleClick('flac')") 无损音质 - FLAC
 </template>