File tree 1 file changed +12
-19
lines changed
1 file changed +12
-19
lines changed Original file line number Diff line number Diff line change 1
- import anim from "animejs" ;
2
-
3
1
export class Cards {
4
2
5
3
static Init ( ) {
@@ -18,16 +16,13 @@ export class Cards {
18
16
// Close Card
19
17
const closeArea = cardReveal . querySelector ( '.card-reveal .card-title' ) ;
20
18
if ( trigger === closeArea || closeArea . contains ( trigger ) ) {
21
- anim ( {
22
- targets : cardReveal ,
23
- translateY : 0 ,
24
- duration : 225 ,
25
- easing : 'easeInOutQuad' ,
26
- complete : ( anim ) => {
27
- cardReveal . style . display = 'none' ;
28
- card . style . overflow = initialOverflow ;
29
- }
30
- } ) ;
19
+ const duration = 225 ;
20
+ cardReveal . style . transition = `transform ${ duration } ms ease` ; //easeInOutQuad
21
+ cardReveal . style . transform = 'translateY(0)' ;
22
+ setTimeout ( ( ) => {
23
+ cardReveal . style . display = 'none' ;
24
+ card . style . overflow = initialOverflow ;
25
+ } , duration ) ;
31
26
} ;
32
27
33
28
// Reveal Card
@@ -36,16 +31,14 @@ export class Cards {
36
31
if ( trigger === activator || activator . contains ( trigger ) ) {
37
32
card . style . overflow = 'hidden' ;
38
33
cardReveal . style . display = 'block' ;
39
- anim ( {
40
- targets : cardReveal ,
41
- translateY : '-100%' ,
42
- duration : 300 ,
43
- easing : 'easeInOutQuad'
44
- } ) ;
34
+ setTimeout ( ( ) => {
35
+ const duration = 300 ;
36
+ cardReveal . style . transition = `transform ${ duration } ms ease` ; //easeInOutQuad
37
+ cardReveal . style . transform = 'translateY(-100%)' ;
38
+ } , 1 ) ;
45
39
}
46
40
} ) ;
47
41
48
-
49
42
} ) ;
50
43
} ) ;
51
44
You can’t perform that action at this time.
0 commit comments