优化选择框动画效果

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,25 +113,25 @@ export default {
   display: inline-block;
   // font-size: 56px;
 
-  > input {
+}
-    display: none;
+.input {
-    &[disabled] {
+  display: none;
-      + .content {
+  &[disabled] {
-        opacity: .5;
+    + .content {
-      }
+      opacity: .5;
     }
-    &:checked {
+  }
-      + .content {
+  &:checked {
-        > div {
+    + .content {
-          &:after {
+      .container {
-            border-color: @color-theme;
+        &:after {
-          }
+          border-color: @color-theme;
-          svg {
-            transform: scale(1);
-            opacity: 1;
-          }
         }
       }
+      .icon {
+        transform: scale(1);
+        // opacity: 1;
+      }
     }
   }
 }
@@ -139,41 +139,41 @@ export default {
   display: flex;
   justify-content: center;
 
-  > div {
+}
-    flex: none;
+.container {
-    position: relative;
+  flex: none;
-    display: inline-block;
+  position: relative;
-    width: 1em;
+  display: inline-block;
-    height: 1em;
+  width: 1em;
-    cursor: pointer;
+  height: 1em;
-    display: flex;
+  cursor: pointer;
-    color: @color-theme;
+  display: flex;
-    // border: 1px solid #ccc;
+  color: @color-theme;
-    &:after {
+  // border: 1px solid #ccc;
-      position: absolute;
+  &:after {
-      content: ' ';
+    position: absolute;
-      top: 0;
+    content: ' ';
-      bottom: 0;
+    top: 0;
-      left: 0;
+    bottom: 0;
-      right: 0;
+    left: 0;
-      border: 1px solid @color-theme_2-font-label;
+    right: 0;
-      transition: border-color 0.2s ease;
+    border: 1px solid @color-theme_2-font-label;
-      border-radius: 15%;
+    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;
+  flex: auto;
-    line-height: 1;
+  line-height: 1;
-    margin-left: 5px;
+  margin-left: 5px;
-    cursor: pointer;
+  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 {

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>