mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): loading transition

Browse Source
This commit is contained in:
07akioni 2019-09-06 13:36:27 +08:00
parent 87ddec408e
commit cef1d50aa6
6 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/components/buttonDemo/loading.demo.vue
View File

@ -34,6 +34,15 @@
>
Loading
</n-button>
<n-button
:loading="loading"
type="primary"
size="large"
round
@click="loading = !loading"
>
Loading
</n-button>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>

4
demo/readme.js
View File

@ -279,8 +279,8 @@ Vue.use(naiveUi)
<td></td>
</tr>
<tr>
<td>LoadingBar</td>
<td style="text-align:center;">😍</td>
<td>Time</td>
<td style="text-align:center;">🚧</td>
<td style="text-align:center;"></td>
<td></td>
</tr>

10
packages/common/Button/src/main.vue
View File

@ -21,6 +21,9 @@
>
<n-spin
v-if="loading"
:class="{
'simulate-transparent-stroke': type === 'primary'
}"
:size="null"
:stroke-width="4"
/>
@ -54,10 +57,15 @@
<div
v-if="(loading || hasIcon) && iconOnRight"
class="n-button__icon n-button__icon--right"
:class="{'n-button__icon--slot': $slots.icon }"
:class="{
'n-button__icon--slot': $slots.icon
}"
>
<n-spin
v-if="loading"
:class="{
'simulate-transparent-stroke': type === 'primary'
}"
:size="null"
:stroke-width="4"
/>

6
packages/mixins/texttransparentable.js
View File

@ -23,7 +23,11 @@ export default {
}
[n-id=${id}] .simulate-transparent-background {
background-color: ${this.ascendantBackgroundColor}!important;
}`
}
[n-id=${id}] .simulate-transparent-stroke circle {
stroke: ${this.ascendantBackgroundColor}!important;
}
`
this.cssNode.type = 'text/css'
document.querySelector('head').appendChild(this.cssNode)
},

8
styles/Button.scss
View File

@ -37,7 +37,7 @@
height: $tiny-height;
padding: 0 6px;
@include m(round) {
padding: 0 14px;
padding: 0 10px;
border-radius: $tiny-height / 2;
}
@include e(content) {
@ -69,7 +69,7 @@
padding: 0 10px;
@include m(round) {
border-radius: $small-height / 2;
padding: 0 18px;
padding: 0 14px;
}
@include e(content) {
line-height: $small-height;
@ -99,7 +99,7 @@
height: $default-height;
padding: 0 14px;
@include m(round) {
padding: 0 22px;
padding: 0 18px;
border-radius: $default-height / 2;
}
@include e(content) {
@ -130,7 +130,7 @@
height: $large-height;
padding: 0 18px;
@include m(round) {
padding: 0 26px;
padding: 0 22px;
border-radius: $large-height / 2;
}
@include e(content) {

8
styles/theme/default.scss
View File

@ -288,22 +288,26 @@ $scrollbar-color--hover: rgba(255,255,255,0.3);
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
&.#{$namespace}-#{$block}-leave-active {
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay;
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay, margin-right $duration $default-cubic-bezier, margin-left $duration $default-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-active {
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier;
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier, margin-right $duration $default-cubic-bezier, margin-left $duration $default-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$block}-enter {
max-width: 0!important;
margin-left: 0!important;
margin-right: 0!important;
opacity: 0;
}
&.#{$namespace}-#{$block}-leave {
opacity: 1;
}
&.#{$namespace}-#{$block}-leave-to {
margin-left: 0!important;
margin-right: 0!important;
max-width: 0!important;
opacity: 0!important;
}