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

feat(color): add color-transition to declare transition explicitly

Browse Source
This commit is contained in:
07akioni 2020-11-14 21:57:52 +08:00
parent 9b5c7cf390
commit f5ac074f70
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/icon/src/Icon.js
View File

@ -30,6 +30,10 @@ export default {
color: {
type: String,
default: undefined
},
colorTransition: {
type: Boolean,
default: false
}
},
computed: {
@ -48,14 +52,14 @@ export default {
const parent = this.$parent
if (parent && parent.$options.__NAIVE_ICON__) return getSlot(this)
else {
const mergedTheme = this.mergedTheme
const depth = this.depth
const { mergedTheme, depth, colorTransition } = this.mergedTheme
return h('i', {
...this.$attrs,
class: {
'n-icon': true,
[`n-${mergedTheme}-theme`]: mergedTheme,
[`n-icon--${depth}-depth`]: depth
[`n-icon--${depth}-depth`]: depth,
'n-icon--color-transition': colorTransition
},
style: {
...this.styles,

5
src/icon/src/styles/themed-base.cssr.js
View File

@ -15,12 +15,13 @@ export default c([
text-align: center;
display: inline-block;
position: relative;
transition:
fill .3s ${cubicBezierEaseInOut};
fill: currentColor;
`
},
[
cM('color-transition', {
transition: `color .3s ${cubicBezierEaseInOut}`
}),
c('svg', {
height: '1em',
width: '1em',