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

fix(drawer): fade in transition

Browse Source
This commit is contained in:
07akioni 2020-07-31 22:23:49 +08:00
parent 2e3c96fc0f
commit 2b1ba68883
3 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/drawer/src/Drawer.vue
View File

@ -10,7 +10,7 @@
<div
class="n-drawer-container"
>
<transition name="n-drawer-overlay-transition">
<transition name="n-fade-in-transition">
<div
v-if="active"
class="n-drawer-overlay"

9
src/drawer/src/styles/themed-base.cssr.js
View File

@ -1,4 +1,4 @@
import { c, cTB, cM } from '../../../_utils/cssr'
import { c, cTB, cB, cM } from '../../../_utils/cssr'
import slideInFromRightTransition from '../../../styles/_transitions/slide-in-from-right'
import slideInFromLeftTransition from '../../../styles/_transitions/slide-in-from-left'
import slideInFromTopTransition from '../../../styles/_transitions/slide-in-from-top'
@ -60,7 +60,7 @@ export default c([
`
})
]),
cTB('drawer-overlay', {
cB('drawer-overlay', {
raw: `
background-color: rgba(0, 0, 0, .3);
position: absolute;
@ -71,7 +71,7 @@ export default c([
pointer-events: all;
`
}),
c('drawer-overlay', {
cB('drawer-overlay', {
raw: `
background-color: rgba(0, 0, 0, .3);
position: absolute;
@ -83,12 +83,11 @@ export default c([
`
}, [
fadeInTransition({
name: 'drawer-overlay',
enterDuration: '0.3s',
leaveDuration: '0.3s'
})
]),
c('darwer-container', {
cB('darwer-container', {
raw: `
position: absolute;
left: 0;

6
src/styles/_transitions/fade-in.js
View File

@ -17,12 +17,10 @@ export default function ({
c(`&.${namespace}-${name}-transition-leave-active`, {
transition: `all ${leaveDuration} ${easeInOutCubicBezier}!important`
}),
c(`&.${namespace}-${name}-transition-enter,
&.${namespace}-${name}-transiton-leave-to`, {
c(`&.${namespace}-${name}-transition-enter, &.${namespace}-${name}-transition-leave-to`, {
opacity: 0
}),
c(`&.${namespace}-${name}-transition-enter-to,
&.${namespace}-${name}-transition-leave`, {
c(`&.${namespace}-${name}-transition-enter-to, &.${namespace}-${name}-transition-leave`, {
opacity: 1
})
]