Howdy, everyone!
Trying to do a smooth transition with hiding and showing elements on my site. There are 4 container boxes (with hover a feature) that are hidden while a simple container is shown in their place. After the hide() animation is complete, the text (as well as any graphic) from those containers reappear and then disappear again after a second.
Any ideas?
Code:
// API Reference: https://www.wix.com/corvid/reference
// “Hello, World!” Example: https://www.wix.com/corvid/hello-world
const transitionSpeed = 1000;
const days = {
SUNDAY: "sunday",
MONDAY: "monday",
TUESDAY: "tuesday",
WEDNESDAY: "wednesday",
THURSDAY: "thursday",
FRIDAY: "friday",
SATURDAY: "saturday"
}
$w.onReady(function () {
});
function changeState(show)
{
show ? $w("#sundayCard").show("float", {"direction":"left", "duration":transitionSpeed}) : $w("#sundayCard").hide("float", {"direction":"left", "duration":transitionSpeed});
show ? $w("#mondayCard").show("float", {"direction":"left", "duration":transitionSpeed}) : $w("#mondayCard").hide("float", {"direction":"left", "duration":transitionSpeed});
show ? $w("#tuesdayCard").show("float", {"direction":"right", "duration":transitionSpeed}) : $w("#tuesdayCard").hide("float", {"direction":"right", "duration":transitionSpeed});
show ? $w("#wednesdayCard").show("float", {"direction":"right", "duration":transitionSpeed}) : $w("#wednesdayCard").hide("float", {"direction":"right", "duration":transitionSpeed});
show ? $w("#detailsPage").hide("float", {"direction":"top", "duration":transitionSpeed}) : $w("#detailsPage").show("float", {"direction":"top", "duration":transitionSpeed});
}
function showDetails(day)
{
changeState(false);
$w("#displayDay").text = day;
}
export function sundayCard_click(event) { showDetails(days.SUNDAY); }
export function mondayCard_click(event) { showDetails(days.MONDAY); }
export function tuesdayCard_click(event) { showDetails(days.TUESDAY); }
export function wednesdayCard_click(event) { showDetails(days.WEDNESDAY); }
export function sundayCard_mouseIn(event) {
console.log("Hover");
}
export function detailsBack_click(event) {
changeState(true);
}
Demonstration:
