mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base-loading): no icon switch transition style...

Browse Source
This commit is contained in:
zhanglecong 2023-12-27 21:31:02 +08:00
parent 36dc01ba42
commit 6dce58f13d
2 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/_internal/loading/src/Loading.tsx
View File

@ -54,57 +54,62 @@ export default defineComponent({
{{
default: () =>
this.show ? (
<div class={`${clsPrefix}-base-loading__container`}>
<svg
class={`${clsPrefix}-base-loading__icon`}
viewBox={`0 0 ${2 * scaledRadius} ${2 * scaledRadius}`}
xmlns="http://www.w3.org/2000/svg"
style={{ color: stroke }}
>
<g>
<animateTransform
attributeName="transform"
type="rotate"
values={`0 ${scaledRadius} ${scaledRadius};270 ${scaledRadius} ${scaledRadius}`}
begin="0s"
dur={duration}
fill="freeze"
repeatCount="indefinite"
/>
<circle
class={`${clsPrefix}-base-loading__icon`}
fill="none"
stroke="currentColor"
stroke-width={strokeWidth}
stroke-linecap="round"
cx={scaledRadius}
cy={scaledRadius}
r={radius - strokeWidth / 2}
stroke-dasharray={5.67 * radius}
stroke-dashoffset={18.48 * radius}
>
<div
key="icon"
class={`${clsPrefix}-base-loading__transition-wrapper`}
>
<div class={`${clsPrefix}-base-loading__container`}>
<svg
class={`${clsPrefix}-base-loading__icon`}
viewBox={`0 0 ${2 * scaledRadius} ${2 * scaledRadius}`}
xmlns="http://www.w3.org/2000/svg"
style={{ color: stroke }}
>
<g>
<animateTransform
attributeName="transform"
type="rotate"
values={`0 ${scaledRadius} ${scaledRadius};135 ${scaledRadius} ${scaledRadius};450 ${scaledRadius} ${scaledRadius}`}
values={`0 ${scaledRadius} ${scaledRadius};270 ${scaledRadius} ${scaledRadius}`}
begin="0s"
dur={duration}
fill="freeze"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-dashoffset"
values={`${5.67 * radius};${1.42 * radius};${
5.67 * radius
}`}
begin="0s"
dur={duration}
fill="freeze"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
<circle
class={`${clsPrefix}-base-loading__icon`}
fill="none"
stroke="currentColor"
stroke-width={strokeWidth}
stroke-linecap="round"
cx={scaledRadius}
cy={scaledRadius}
r={radius - strokeWidth / 2}
stroke-dasharray={5.67 * radius}
stroke-dashoffset={18.48 * radius}
>
<animateTransform
attributeName="transform"
type="rotate"
values={`0 ${scaledRadius} ${scaledRadius};135 ${scaledRadius} ${scaledRadius};450 ${scaledRadius} ${scaledRadius}`}
begin="0s"
dur={duration}
fill="freeze"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-dashoffset"
values={`${5.67 * radius};${1.42 * radius};${
5.67 * radius
}`}
begin="0s"
dur={duration}
fill="freeze"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
</div>
</div>
) : (
<div

12
src/_internal/loading/src/styles/index.cssr.ts
View File

@ -1,5 +1,6 @@
import { c, cB, cE } from '../../../../_utils/cssr'
import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr'
export default c([
c('@keyframes rotator', `
0% {
@ -17,6 +18,13 @@ export default c([
width: 1em;
height: 1em;
`, [
cE('transition-wrapper', `
position: absolute;
width: 100%;
height: 100%;
`, [
iconSwitchTransition()
]),
cE('placeholder', `
position: absolute;
left: 50%;
@ -35,9 +43,7 @@ export default c([
cE('icon', `
height: 1em;
width: 1em;
`, [
iconSwitchTransition()
])
`)
])
])
])