Skip to content

Commit 925ebe9

Browse files
committed
fix: toggle button text in resetAnimation()
text was being toggled only on button click and before any customization is made via AnimationForm now working for animations triggered by resetAnimation() or by button click
1 parent 353f43a commit 925ebe9

File tree

1 file changed

+34
-28
lines changed

1 file changed

+34
-28
lines changed

docs/examples/index.md

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,58 +20,63 @@ aside: false
2020
btn.innerText = btn.innerText === btnText[0] ? btnText[1] : btnText[0];
2121
}
2222

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);
2928
}
29+
}
30+
31+
function slideAnimations() {
32+
const complete = () => {
33+
toggleBtnHandler('slide');
34+
};
35+
3036
jsCssAnimations.init.slideUp({
3137
trigger: `.${ examples.slide.btnList[0].class }`,
32-
complete: () => {
33-
toggleSlideBtns();
34-
},
38+
complete,
3539
});
40+
3641
jsCssAnimations.init.slideDown({
3742
trigger: `.${ examples.slide.btnList[1].class }`,
38-
complete: () => {
39-
toggleSlideBtns();
40-
},
43+
complete,
4144
});
45+
4246
jsCssAnimations.init.slideLeft({
4347
trigger: `.${ examples.slide.btnList[2].class }`,
44-
complete: () => {
45-
toggleSlideBtns();
46-
},
48+
complete,
4749
});
50+
4851
jsCssAnimations.init.slideRight({
4952
trigger: `.${ examples.slide.btnList[3].class }`,
50-
complete: () => {
51-
toggleSlideBtns();
52-
},
53+
complete,
5354
});
5455
}
5556

5657
const fadeOpts = {
5758
keepSpace: true,
58-
complete: () => {
59-
toggleBtnTitle(examples.fade.btnList, 0);
60-
}
6159
}
6260
function fadeAnimation() {
63-
jsCssAnimations.init.fade(fadeOpts)
61+
jsCssAnimations.init.fade({
62+
...fadeOpts,
63+
complete: () => {
64+
toggleBtnHandler('fade');
65+
}
66+
})
6467
}
6568

6669
const collapseOpts = {
67-
trigger: `.${examples.collapse.btnList[0].class}`,
6870
staggerDelay: '500ms',
69-
complete: () => {
70-
toggleBtnTitle(examples.collapse.btnList, 0);
71-
}
7271
}
7372
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+
})
7580
}
7681

7782
const validateAnimationFormField = {
@@ -119,7 +124,8 @@ aside: false
119124
trigger: triggerSelector,
120125
...opts,
121126
timingFunction: opts.easing,
122-
keepSpace: opts.maintainSpace
127+
keepSpace: opts.maintainSpace,
128+
complete: () => toggleBtnHandler(animName)
123129
});
124130
document.querySelector(triggerSelector).click();
125131
})

0 commit comments

Comments
 (0)