Adding Delay Before Switching Tabs

Hello,

I have a TabSheet with multiple tabs, and I need to switch to a different tab when a user clicks a specific button. After the button is clicked, it triggers a CSS animation:

.correct-answer {
    background-color: green !important;
    color: white !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

I’d like to add a delay of 1 second before the UI switches to the next tab to allow the animation to play. How can I implement this delay effectively?

Hope this description is good enough, please let me know if you need more information :)

Thank you!
Philipp

Maybe you can trigger the animation on correct answer and then use the navigationend event to trigger the tab switch? I wouldn’t use a fixed time as that will inevitable get out of sync with the animation over time as you tweak things

Thanks! I will try that.

For future reference, I found a solution to this problem. It is not very beautful but works for me in this case.

private void moveToNextTab() {
		System.out.println("Move to next tab");
		int currentIndex = tabSheet.getSelectedIndex();
		int nextIndex = currentIndex + 1;
		tabSheet.getTabAt(nextIndex).setEnabled(true);

		getUI().ifPresent(ui -> ui.access(() -> {
			ui.setPollInterval(500); // Polling interval set to match animation duration
			ui.addPollListener(e -> {
				ui.access(() -> {
					System.out.println("Selecting next tab: " + nextIndex);
					tabSheet.setSelectedIndex(nextIndex);
					ui.setPollInterval(-1); // Stop polling after update
				});
			});
		}));
	}