mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
fix(global-style): shouldn't apply style transition on first mount
This commit is contained in:
parent
1843ee4dc5
commit
2687703bcc
@ -1,5 +1,11 @@
|
|||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
|
## Pending
|
||||||
|
|
||||||
|
### Fixes
|
||||||
|
|
||||||
|
- Fix `n-global-style` applies style transition on first mount.
|
||||||
|
|
||||||
## 2.19.1 (2021-09-21)
|
## 2.19.1 (2021-09-21)
|
||||||
|
|
||||||
### Fixes
|
### Fixes
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
|
## Pending
|
||||||
|
|
||||||
|
### Fixes
|
||||||
|
|
||||||
|
- 修复 `n-global-style` 在首次挂载时应用样式过渡
|
||||||
|
|
||||||
## 2.19.1 (2021-09-21)
|
## 2.19.1 (2021-09-21)
|
||||||
|
|
||||||
### Fixes
|
### Fixes
|
||||||
|
@ -17,6 +17,7 @@ export default defineComponent({
|
|||||||
const { body } = document
|
const { body } = document
|
||||||
const { style } = body
|
const { style } = body
|
||||||
let styleApplied = false
|
let styleApplied = false
|
||||||
|
let firstApply = true
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const {
|
const {
|
||||||
@ -34,14 +35,22 @@ export default defineComponent({
|
|||||||
)
|
)
|
||||||
: commonLight
|
: commonLight
|
||||||
if (styleApplied || !body.hasAttribute('n-styled')) {
|
if (styleApplied || !body.hasAttribute('n-styled')) {
|
||||||
body.setAttribute('n-styled', '')
|
|
||||||
styleApplied = true
|
|
||||||
style.backgroundColor = bodyColor
|
style.backgroundColor = bodyColor
|
||||||
style.color = textColor2
|
style.color = textColor2
|
||||||
style.fontSize = fontSize
|
style.fontSize = fontSize
|
||||||
style.fontFamily = fontFamily
|
style.fontFamily = fontFamily
|
||||||
style.lineHeight = lineHeight
|
style.lineHeight = lineHeight
|
||||||
style.transition = `color .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}`
|
const transition = `color .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}`
|
||||||
|
if (firstApply) {
|
||||||
|
setTimeout(() => {
|
||||||
|
style.transition = transition
|
||||||
|
}, 0)
|
||||||
|
} else {
|
||||||
|
style.transition = transition
|
||||||
|
}
|
||||||
|
body.setAttribute('n-styled', '')
|
||||||
|
styleApplied = true
|
||||||
|
firstApply = false
|
||||||
} else if (__DEV__) {
|
} else if (__DEV__) {
|
||||||
warn(
|
warn(
|
||||||
'global-style',
|
'global-style',
|
||||||
|
Loading…
Reference in New Issue
Block a user