From a791308b6557388c22989565b50601e7deb7d9dd Mon Sep 17 00:00:00 2001 From: Josep Boix Requesens Date: Tue, 27 Feb 2024 23:11:04 +0100 Subject: [PATCH] fix: avoid triggering multiple animationend events To prevent the triggering of multiple `animationend` events, a fix has been implemented for combined animations such as: `fade-in-grow`, `fade-out-shrink` and `slide-up-fade-in`. Previously, an `animationend` event would be triggered for each individual animation, leading to unexpected behavior. This fix introduces an `infinite` iteration count in one of the animations, ensuring that only a single `animationend` event is triggered. --- src/theme/animations.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/theme/animations.scss b/src/theme/animations.scss index 68c3172..b10dfb2 100644 --- a/src/theme/animations.scss +++ b/src/theme/animations.scss @@ -16,18 +16,17 @@ .slide-up-fade-in { opacity: 0; animation: fade-in .4s var(--ease-elastic-in-3) forwards, - slide-in-up .4s var(--ease-elastic-in-3); + slide-in-up .4s var(--ease-elastic-in-3) infinite; } .fade-in-grow { opacity: 0; - animation: fade-in .4s var(--ease-elastic-in-3) forwards, - grow .4s ease; + animation: fade-in .4s var(--ease-elastic-in-3) forwards, grow .4s ease infinite; } .fade-out-shrink { opacity: 0; - animation: fade-in .4s var(--ease-elastic-in-3) forwards, grow .4s ease; + animation: fade-in .4s var(--ease-elastic-in-3) forwards, grow .4s ease infinite; animation-direction: reverse; }