Problem Description: I am implementing a next-previous question transition using a Multistate Box in Wix for a survey or quiz-like application. My goal is to achieve smooth transitions between questions. However, I’ve encountered an issue: when transitioning from one state to another within the Multistate Box, it seems that the visibility settings of hidden elements are not respected. Specifically, elements that I have intentionally hidden in a given state briefly appear during the transition before settling into the desired state. I’m uncertain whether I’m missing a detail in my implementation or if this is an inherent behavior of the Multistate Box.
Affected Product: I’m using the Multistate Box component on Wix, specifically leveraging the hide/show functionalities with effects to manage transitions between states.
Objective: To create fluid transitions between questions in a survey or quiz while maintaining certain elements hidden during state changes.
Attempted Solutions:
- I’ve tried using
setTimeout
to delay the state change and allow the hide animation to complete before proceeding, but this did not resolve the issue. - I utilized promises with
.then()
to sequence the actions of hiding the Multistate Box, changing its state, and then showing the Multistate Box again, hoping this would respect the visibility settings of elements in each state. - I also attempted to manually hide specific elements after the state change as a workaround, but this is not ideal and disrupts the transition aesthetics.
Example Code: Here is a snippet of my code demonstrating how I’m handling the ‘next question’ transition, attempting to hide and show the Multistate Box and switch between its states:
javascriptCopy code
export function nextQ() {
$w('#multiStateBox1').hide("float", foldHideOptions).then(() => {
currentStateIndex += 1;
$w('#multiStateBox1').changeState(multiStates[currentStateIndex].id).then(() => {
// Attempt to manually hide specific elements after the state change
// $w('#someBox').hide(); // Example of hiding a specific element
$w('#progressBar1').value = currentStateIndex;
$w('#previousBtn').enable();
$w('#multiStateBox1').show("float", foldshowOptions);
});
});
}
Additional Information: I am looking for a solution that allows for smooth state transitions without momentarily revealing elements that should remain hidden. Any advice on how to better manage visibility transitions or ensure that the Multistate Box respects the visibility settings of elements during state changes would be greatly appreciated.