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

Expressions: Fix fade transitions for groups

Browse Source 
See previous commit. Same absolute positioning applies with group
mode sprites.

Signed-off-by: kingbri <bdashore3@proton.me>
This commit is contained in:
kingbri
2023-07-10 23:21:11 -04:00
parent e5fab05309
commit 1f1af8e631
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/scripts/extensions/expressions/index.js
View File

@@ -318,10 +318,18 @@ async function setImage(img, path) {
//add animation flags to both images //add animation flags to both images
//to prevent multiple expression changes happening simultaneously //to prevent multiple expression changes happening simultaneously
img.addClass('expression-animating') img.addClass('expression-animating');
// Set the parent container's min width and height before running the transition
const imgWidth = img.width();
const imgHeight = img.height();
const expressionHolder = img.parent();
expressionHolder.css('min-width', imgWidth > 100 ? imgWidth : 100);
expressionHolder.css('min-height', imgHeight > 100 ? imgHeight : 100);
//position absolute prevent the original from jumping around during transition //position absolute prevent the original from jumping around during transition
img.css('position', 'absolute') img.css('position', 'absolute');
expressionClone.addClass('expression-animating') expressionClone.addClass('expression-animating');
//fade the clone in //fade the clone in
expressionClone.css({ expressionClone.css({
opacity: 0 opacity: 0
@@ -338,6 +346,11 @@ async function setImage(img, path) {
//replace ID so it becomes the new 'original' expression for next change //replace ID so it becomes the new 'original' expression for next change
expressionClone.attr('id', originalId); expressionClone.attr('id', originalId);
expressionClone.removeClass('expression-animating'); expressionClone.removeClass('expression-animating');
// Reset the expression holder min height and width
expressionHolder.css('min-width', 100);
expressionHolder.css('min-height', 100);
resolve(); resolve();
}); });