@@ -20,58 +20,63 @@ aside: false
20
20
btn .innerText = btn .innerText === btnText[0 ] ? btnText[1 ] : btnText[0 ];
21
21
}
22
22
23
- function slideAnimations () {
24
- const toggleSlideBtns = () => {
25
- toggleBtnTitle (examples .slide .btnList , 0 );
26
- toggleBtnTitle (examples .slide .btnList , 1 );
27
- toggleBtnTitle (examples .slide .btnList , 2 );
28
- toggleBtnTitle (examples .slide .btnList , 3 );
23
+ function toggleBtnHandler (animationName ) {
24
+ const btnList = examples[animationName].btnList ;
25
+ const btnCount = btnList .length ;
26
+ for (let i = 0 ; i < btnCount; i++ ) {
27
+ toggleBtnTitle (btnList, i);
29
28
}
29
+ }
30
+
31
+ function slideAnimations () {
32
+ const complete = () => {
33
+ toggleBtnHandler (' slide' );
34
+ };
35
+
30
36
jsCssAnimations .init .slideUp ({
31
37
trigger: ` .${ examples .slide .btnList [0 ].class } ` ,
32
- complete : () => {
33
- toggleSlideBtns ();
34
- },
38
+ complete,
35
39
});
40
+
36
41
jsCssAnimations .init .slideDown ({
37
42
trigger: ` .${ examples .slide .btnList [1 ].class } ` ,
38
- complete : () => {
39
- toggleSlideBtns ();
40
- },
43
+ complete,
41
44
});
45
+
42
46
jsCssAnimations .init .slideLeft ({
43
47
trigger: ` .${ examples .slide .btnList [2 ].class } ` ,
44
- complete : () => {
45
- toggleSlideBtns ();
46
- },
48
+ complete,
47
49
});
50
+
48
51
jsCssAnimations .init .slideRight ({
49
52
trigger: ` .${ examples .slide .btnList [3 ].class } ` ,
50
- complete : () => {
51
- toggleSlideBtns ();
52
- },
53
+ complete,
53
54
});
54
55
}
55
56
56
57
const fadeOpts = {
57
58
keepSpace: true ,
58
- complete : () => {
59
- toggleBtnTitle (examples .fade .btnList , 0 );
60
- }
61
59
}
62
60
function fadeAnimation () {
63
- jsCssAnimations .init .fade (fadeOpts)
61
+ jsCssAnimations .init .fade ({
62
+ ... fadeOpts,
63
+ complete : () => {
64
+ toggleBtnHandler (' fade' );
65
+ }
66
+ })
64
67
}
65
68
66
69
const collapseOpts = {
67
- trigger: ` .${ examples .collapse .btnList [0 ].class } ` ,
68
70
staggerDelay: ' 500ms' ,
69
- complete : () => {
70
- toggleBtnTitle (examples .collapse .btnList , 0 );
71
- }
72
71
}
73
72
function collapseAnimation () {
74
- jsCssAnimations .init .collapse (collapseOpts)
73
+ jsCssAnimations .init .collapse ({
74
+ ... collapseOpts,
75
+ trigger: ` .${ examples .collapse .btnList [0 ].class } ` ,
76
+ complete : () => {
77
+ toggleBtnHandler (' collapse' );
78
+ }
79
+ })
75
80
}
76
81
77
82
const validateAnimationFormField = {
@@ -119,7 +124,8 @@ aside: false
119
124
trigger: triggerSelector,
120
125
... opts,
121
126
timingFunction: opts .easing ,
122
- keepSpace: opts .maintainSpace
127
+ keepSpace: opts .maintainSpace ,
128
+ complete : () => toggleBtnHandler (animName)
123
129
});
124
130
document .querySelector (triggerSelector).click ();
125
131
})
0 commit comments