rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fit/fix flash duration animation to length

Browse Source
This commit is contained in:
Wolfsblvt
2024-07-10 19:43:58 +02:00
parent 91b5be2554
commit ec10090cd4
3 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/scripts/utils.js
View File

@ -1571,13 +1571,29 @@ export function setValueByPath(obj, path, value) {
/**
* Flashes the given HTML element via CSS flash animation for a defined period
* @param {JQuery<HTMLElement>} element - The element to flash
* @param {number} timespan - A numer in milliseconds how the flash should last
* @param {number} timespan - A number in milliseconds how the flash should last (default is 2000ms. Multiples of 1000ms work best, as they end with the flash animation being at 100% opacity)
*/
export function flashHighlight(element, timespan = 2000) {
const flashDuration = 2000; // Duration of a single flash cycle in milliseconds
element.addClass('flash animated');
setTimeout(() => element.removeClass('flash animated'), timespan);
element.css('--animation-duration', `${flashDuration}ms`);
// Repeat the flash animation
const intervalId = setInterval(() => {
element.removeClass('flash animated');
void element[0].offsetWidth; // Trigger reflow to restart animation
element.addClass('flash animated');
}, flashDuration);
setTimeout(() => {
clearInterval(intervalId);
element.removeClass('flash animated');
element.css('--animation-duration', '');
}, timespan);
}
/**
* Checks if the given control has an animation applied to it
*