优化选择框动画效果
lyswhut
parent
f4c65516d0
commit
10784e95bb
|
|
@ -1,3 +1,7 @@
|
|||
#### 新增
|
||||
|
||||
- 新增“我的收藏”本地播放列表
|
||||
|
||||
#### 优化
|
||||
|
||||
- 优化选择框动画效果
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue