Skip to content

Commit 7a3a19a

Browse files
fullofcaffeinefullofcaffeine
committed
Start implementingthe fadein/fadeout animation in pure CSS
1 parent 2097e84 commit 7a3a19a

File tree

2 files changed

+76
-93
lines changed

2 files changed

+76
-93
lines changed

‎packages/components/src/drop-zone/index.tsx‎

Lines changed: 14 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -12,82 +12,32 @@ import { upload, Icon } from '@wordpress/icons';
1212
import { getFilesFromDataTransfer } from '@wordpress/dom';
1313
import {
1414
__experimentalUseDropZone as useDropZone,
15-
useReducedMotion,
15+
//useReducedMotion,
1616
} from '@wordpress/compose';
1717

1818
/**
1919
* Internal dependencies
2020
*/
21-
import {
22-
__unstableMotion as motion,
23-
__unstableAnimatePresence as AnimatePresence,
24-
} from '../animation';
2521
import type { DropType, DropZoneProps } from './types';
2622
import type { WordPressComponentProps } from '../context';
2723

28-
const backdrop = {
29-
hidden: { opacity: 0 },
30-
show: {
31-
opacity: 1,
32-
transition: {
33-
type: 'tween',
34-
duration: 0.2,
35-
delay: 0,
36-
delayChildren: 0.1,
37-
},
38-
},
39-
exit: {
40-
opacity: 0,
41-
transition: {
42-
duration: 0.2,
43-
delayChildren: 0,
44-
},
45-
},
46-
};
47-
48-
const foreground = {
49-
hidden: { opacity: 0, scale: 0.9 },
50-
show: {
51-
opacity: 1,
52-
scale: 1,
53-
transition: {
54-
duration: 0.1,
55-
},
56-
},
57-
exit: { opacity: 0, scale: 0.9 },
58-
};
59-
6024
function DropIndicator( { label }: { label?: string } ) {
61-
const disableMotion = useReducedMotion();
62-
const children = (
63-
<motion.div
64-
variants={ backdrop }
65-
initial={ disableMotion ? 'show' : 'hidden' }
66-
animate="show"
67-
exit={ disableMotion ? 'show' : 'exit' }
25+
return (
26+
<div
6827
className="components-drop-zone__content"
69-
// Without this, when this div is shown,
70-
// Safari calls a onDropZoneLeave causing a loop because of this bug
71-
// https://bugs.webkit.org/show_bug.cgi?id=66547
7228
style={ { pointerEvents: 'none' } }
7329
>
74-
<motion.div variants={ foreground }>
30+
<div className="components-drop-zone__content-inner">
7531
<Icon
7632
icon={ upload }
7733
className="components-drop-zone__content-icon"
7834
/>
7935
<span className="components-drop-zone__content-text">
8036
{ label ? label : __( 'Drop files to upload' ) }
8137
</span>
82-
</motion.div>
83-
</motion.div>
38+
</div>
39+
</div>
8440
);
85-
86-
if ( disableMotion ) {
87-
return children;
88-
}
89-
90-
return <AnimatePresence>{ children }</AnimatePresence>;
9141
}
9242

9343
/**
@@ -98,15 +48,15 @@ function DropIndicator( { label }: { label?: string } ) {
9848
* import { useState } from '@wordpress/element';
9949
*
10050
* const MyDropZone = () => {
101-
* const [ hasDropped, setHasDropped ] = useState( false );
51+
* const [hasDropped, setHasDropped] = useState(false);
10252
*
10353
* return (
10454
* <div>
105-
* { hasDropped ? 'Dropped!' : 'Drop something here' }
55+
* {hasDropped ? 'Dropped!' : 'Drop something here'}
10656
* <DropZone
107-
* onFilesDrop={ () => setHasDropped( true ) }
108-
* onHTMLDrop={ () => setHasDropped( true ) }
109-
* onDrop={ () => setHasDropped( true ) }
57+
* onFilesDrop={() => setHasDropped(true)}
58+
* onHTMLDrop={() => setHasDropped(true)}
59+
* onDrop={() => setHasDropped(true)}
11060
* />
11161
* </div>
11262
* );
@@ -126,6 +76,7 @@ export function DropZoneComponent( {
12676
const [ isDraggingOverElement, setIsDraggingOverElement ] =
12777
useState< boolean >();
12878
const [ type, setType ] = useState< DropType >();
79+
//const disableMotion = true;
12980
const ref = useDropZone( {
13081
onDrop( event ) {
13182
const files = event.dataTransfer
@@ -181,9 +132,10 @@ export function DropZoneComponent( {
181132
setIsDraggingOverElement( false );
182133
},
183134
} );
135+
const isDraggingOver = isDraggingOverDocument || isDraggingOverElement;
184136
const classes = clsx( 'components-drop-zone', className, {
185137
'is-active':
186-
( isDraggingOverDocument || isDraggingOverElement ) &&
138+
isDraggingOver &&
187139
( ( type === 'file' && onFilesDrop ) ||
188140
( type === 'html' && onHTMLDrop ) ||
189141
( type === 'default' && onDrop ) ),

‎packages/components/src/drop-zone/style.scss‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,74 @@
88
visibility: hidden;
99
opacity: 0;
1010
border-radius: $radius-block-ui;
11+
transition:
12+
opacity 0.2s ease-in-out,
13+
visibility 0.2s step-end;
1114

1215
&.is-active {
13-
opacity: 1;
1416
visibility: visible;
17+
opacity: 1;
18+
transition:
19+
opacity 0.2s ease-in-out,
20+
visibility 0s step-start;
1521
}
16-
}
1722

18-
.components-drop-zone__content {
19-
position: absolute;
20-
top: 0;
21-
bottom: 0;
22-
left: 0;
23-
right: 0;
24-
height: 100%;
25-
width: 100%;
26-
display: flex;
27-
background-color: $components-color-accent;
28-
align-items: center;
29-
justify-content: center;
30-
z-index: z-index(".components-drop-zone__content");
31-
text-align: center;
32-
color: $white;
33-
}
23+
&__content {
24+
position: absolute;
25+
top: 0;
26+
bottom: 0;
27+
left: 0;
28+
right: 0;
29+
height: 100%;
30+
width: 100%;
31+
display: flex;
32+
background-color: $components-color-accent;
33+
align-items: center;
34+
justify-content: center;
35+
z-index: z-index(".components-drop-zone__content");
36+
text-align: center;
37+
color: $white;
38+
opacity: 0;
39+
transform: scale(0.9);
40+
transition:
41+
opacity 0.2s ease-in-out,
42+
transform 0.2s ease-in-out;
43+
transition-delay: 0.1s;
44+
pointer-events: none;
3445

35-
.components-drop-zone__content-icon,
36-
.components-drop-zone__content-text {
37-
display: block;
38-
}
46+
.components-drop-zone.is-active & {
47+
opacity: 1;
48+
transform: scale(1);
49+
}
50+
}
3951

40-
.components-drop-zone__content-icon {
41-
margin: 0 auto $grid-unit-10;
42-
line-height: 0;
43-
fill: currentColor;
44-
pointer-events: none;
45-
}
52+
&__content-inner {
53+
opacity: 0;
54+
transform: scale(0.9);
55+
transition:
56+
opacity 0.1s ease-in-out,
57+
transform 0.1s ease-in-out;
4658

47-
.components-drop-zone__content-text {
48-
font-family: $default-font;
49-
font-size: $default-font-size;
59+
.components-drop-zone.is-active & {
60+
opacity: 1;
61+
transform: scale(1);
62+
}
63+
}
64+
65+
&__content-icon,
66+
&__content-text {
67+
display: block;
68+
}
69+
70+
&__content-icon {
71+
margin: 0 auto $grid-unit-10;
72+
line-height: 0;
73+
fill: currentColor;
74+
pointer-events: none;
75+
}
76+
77+
&__content-text {
78+
font-family: $default-font;
79+
font-size: $default-font-size;
80+
}
5081
}

0 commit comments

Comments
 (0)