1313 * @param {number? } duration - The duration of the animation, with default value 500.
1414 */
1515export const slideUp = ( target , duration = 500 ) => {
16- target . style . height = `${ target . offsetHeight } px` ;
17- window . requestAnimationFrame ( ( ) => {
18- target . style . transitionProperty = 'height, margin, padding' ;
19- target . style . transitionDuration = `${ duration } ms` ;
20- target . style . boxSizing = 'border-box' ;
21- target . style . overflow = 'hidden' ;
22- target . style . paddingTop = '0' ;
23- target . style . paddingBottom = '0' ;
24- target . style . marginTop = '0' ;
25- target . style . marginBottom = '0' ;
16+ target . style . height = `${ target . offsetHeight } px` ;
17+ window . requestAnimationFrame ( ( ) => {
18+ target . style . transitionProperty = 'height, margin, padding' ;
19+ target . style . transitionDuration = `${ duration } ms` ;
20+ target . style . boxSizing = 'border-box' ;
21+ target . style . overflow = 'hidden' ;
22+ target . style . paddingTop = '0' ;
23+ target . style . paddingBottom = '0' ;
24+ target . style . marginTop = '0' ;
25+ target . style . marginBottom = '0' ;
2626
27- window . requestAnimationFrame ( ( ) => {
28- function hideTarget ( ) {
29- target . style . display = 'none' ;
30- target . style . removeProperty ( 'height' ) ;
31- target . style . removeProperty ( 'padding-top' ) ;
32- target . style . removeProperty ( 'padding-bottom' ) ;
33- target . style . removeProperty ( 'margin-top' ) ;
34- target . style . removeProperty ( 'margin-bottom' ) ;
35- target . style . removeProperty ( 'overflow' ) ;
36- target . style . removeProperty ( 'transition-duration' ) ;
37- target . style . removeProperty ( 'transition-property' ) ;
38- target . removeEventListener ( 'transitionend' , hideTarget ) ;
27+ window . requestAnimationFrame ( ( ) => {
28+ function hideTarget ( ) {
29+ target . style . display = 'none' ;
30+ target . style . removeProperty ( 'height' ) ;
31+ target . style . removeProperty ( 'padding-top' ) ;
32+ target . style . removeProperty ( 'padding-bottom' ) ;
33+ target . style . removeProperty ( 'margin-top' ) ;
34+ target . style . removeProperty ( 'margin-bottom' ) ;
35+ target . style . removeProperty ( 'overflow' ) ;
36+ target . style . removeProperty ( 'transition-duration' ) ;
37+ target . style . removeProperty ( 'transition-property' ) ;
38+ target . removeEventListener ( 'transitionend' , hideTarget ) ;
3939 const event = new CustomEvent ( 'finishslider' , { // eslint-disable-line
40- detail : target ,
41- } ) ;
42- target . dispatchEvent ( event ) ;
43- }
44- target . addEventListener ( 'transitionend' , hideTarget ) ;
45- target . style . height = '0' ;
46- } ) ;
47- } ) ;
40+ detail : target ,
41+ } ) ;
42+ target . dispatchEvent ( event ) ;
43+ }
44+ target . addEventListener ( 'transitionend' , hideTarget ) ;
45+ target . style . height = '0' ;
46+ } ) ;
47+ } ) ;
4848} ;
4949
5050/**
@@ -55,45 +55,45 @@ export const slideUp = (target, duration = 500) => {
5555 * @param {number? } duration - The duration of the animation, with default value 500.
5656 */
5757export const slideDown = ( target , duration = 500 ) => {
58- let height ;
59- target . style . removeProperty ( 'display' ) ;
60- window . requestAnimationFrame ( ( ) => {
61- let { display } = window . getComputedStyle ( target ) ;
62- if ( display === 'none' ) {
63- display = 'block' ;
64- }
65- target . style . display = display ;
66- height = target . offsetHeight ;
67- target . style . overflow = 'hidden' ;
68- target . style . height = '0' ;
69- target . style . paddingTop = '0' ;
70- target . style . paddingBottom = '0' ;
71- target . style . marginTop = '0' ;
72- target . style . marginBottom = '0' ;
73- target . style . boxSizing = 'border-box' ;
74- target . style . transitionProperty = 'height, margin, padding' ;
75- target . style . transitionDuration = `${ duration } ms` ;
58+ let height ;
59+ target . style . removeProperty ( 'display' ) ;
60+ window . requestAnimationFrame ( ( ) => {
61+ let { display } = window . getComputedStyle ( target ) ;
62+ if ( display === 'none' ) {
63+ display = 'block' ;
64+ }
65+ target . style . display = display ;
66+ height = target . offsetHeight ;
67+ target . style . overflow = 'hidden' ;
68+ target . style . height = '0' ;
69+ target . style . paddingTop = '0' ;
70+ target . style . paddingBottom = '0' ;
71+ target . style . marginTop = '0' ;
72+ target . style . marginBottom = '0' ;
73+ target . style . boxSizing = 'border-box' ;
74+ target . style . transitionProperty = 'height, margin, padding' ;
75+ target . style . transitionDuration = `${ duration } ms` ;
7676
77- window . requestAnimationFrame ( ( ) => {
78- function showTarget ( ) {
79- target . style . removeProperty ( 'padding-top' ) ;
80- target . style . removeProperty ( 'padding-bottom' ) ;
81- target . style . removeProperty ( 'margin-top' ) ;
82- target . style . removeProperty ( 'margin-bottom' ) ;
83- target . style . removeProperty ( 'height' ) ;
84- target . style . removeProperty ( 'overflow' ) ;
85- target . style . removeProperty ( 'transition-duration' ) ;
86- target . style . removeProperty ( 'transition-property' ) ;
87- target . removeEventListener ( 'transitionend' , showTarget ) ;
77+ window . requestAnimationFrame ( ( ) => {
78+ function showTarget ( ) {
79+ target . style . removeProperty ( 'padding-top' ) ;
80+ target . style . removeProperty ( 'padding-bottom' ) ;
81+ target . style . removeProperty ( 'margin-top' ) ;
82+ target . style . removeProperty ( 'margin-bottom' ) ;
83+ target . style . removeProperty ( 'height' ) ;
84+ target . style . removeProperty ( 'overflow' ) ;
85+ target . style . removeProperty ( 'transition-duration' ) ;
86+ target . style . removeProperty ( 'transition-property' ) ;
87+ target . removeEventListener ( 'transitionend' , showTarget ) ;
8888 const event = new CustomEvent ( 'finishslider' , { // eslint-disable-line
89- detail : target ,
90- } ) ;
91- target . dispatchEvent ( event ) ;
92- }
93- target . style . height = `${ height } px` ;
94- target . addEventListener ( 'transitionend' , showTarget ) ;
95- } ) ;
96- } ) ;
89+ detail : target ,
90+ } ) ;
91+ target . dispatchEvent ( event ) ;
92+ }
93+ target . style . height = `${ height } px` ;
94+ target . addEventListener ( 'transitionend' , showTarget ) ;
95+ } ) ;
96+ } ) ;
9797} ;
9898
9999/**
@@ -104,17 +104,17 @@ export const slideDown = (target, duration = 500) => {
104104 * @param {number? } duration - The duration of the animation, with default value 500.
105105 */
106106export const slideToggle = ( target , duration = 500 ) => {
107- if ( ! target . dataset . isSliding ) {
108- target . addEventListener ( 'finishslider' , ( ) => {
109- delete target . dataset . isSliding ;
110- target . removeEventListener ( 'finishslider' ) ;
111- } ) ;
112- if ( window . getComputedStyle ( target ) . display === 'none' ) {
113- target . dataset . isSliding = 'true' ;
114- slideDown ( target , duration ) ;
115- } else {
116- target . dataset . isSliding = 'true' ;
117- slideUp ( target , duration ) ;
118- }
119- }
107+ if ( ! target . dataset . isSliding ) {
108+ target . addEventListener ( 'finishslider' , ( ) => {
109+ delete target . dataset . isSliding ;
110+ target . removeEventListener ( 'finishslider' ) ;
111+ } ) ;
112+ if ( window . getComputedStyle ( target ) . display === 'none' ) {
113+ target . dataset . isSliding = 'true' ;
114+ slideDown ( target , duration ) ;
115+ } else {
116+ target . dataset . isSliding = 'true' ;
117+ slideUp ( target , duration ) ;
118+ }
119+ }
120120} ;
0 commit comments