优化选择框动画效果

publish/changeLog.md

@@ -1,3 +1,7 @@
 #### 新增
 
 - 新增“我的收藏”本地播放列表
+
+#### 优化
+
+- 优化选择框动画效果

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)
+    div(v-else :class="$style.container")
-      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')
+      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,7 +113,8 @@ export default {
   display: inline-block;
   // font-size: 56px;
 
-  > input {
+}
+.input {
   display: none;
   &[disabled] {
     + .content {
@@ -122,15 +123,14 @@ export default {
   }
   &:checked {
     + .content {
-        > div {
+      .container {
         &:after {
           border-color: @color-theme;
         }
-          svg {
+      }
+      .icon {
         transform: scale(1);
-            opacity: 1;
+        // opacity: 1;
-          }
-        }
       }
     }
   }
@@ -139,7 +139,8 @@ export default {
   display: flex;
   justify-content: center;
 
-  > div {
+}
+.container {
   flex: none;
   position: relative;
   display: inline-block;
@@ -160,21 +161,20 @@ export default {
     transition: border-color 0.2s ease;
     border-radius: 15%;
   }
-    svg {
-      transition: 0.2s ease;
-      transition-property: transform, opacity;
-      transform: scale(0.5);
-      opacity: 0;
 }
+.icon {
+  transition: 0.3s ease;
+  transition-property: transform;
+  transform: scale(0);
+  // opacity: 0;
 }
 
-  > span {
+.label {
   flex: auto;
   line-height: 1;
   margin-left: 5px;
   cursor: pointer;
 }
-}
 
 each(@themes, {
   :global(#container.@{value}) {
@@ -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 {

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>