tmedwards / sugarcube-2

SugarCube is a free (gratis and libre) story format for Twine/Twee.
https://www.motoslave.net/sugarcube/2/
BSD 2-Clause "Simplified" License
185 stars 42 forks source link

Config.passages.transitionOut bug #293

Closed fg109 closed 7 months ago

fg109 commented 7 months ago

When setting Config.passages.transitionOut to a string, outgoing passages are not removed. I'm not sure if this issue is related to my browser, but I've only tested this on Chrome.

Steps to reproduce the behavior:

  1. Add Config.passages.transitionOut = 'opacity'; to Story JavaScript.
  2. Add the CSS code example (the one that has transition) for Config.passages.transitionOut in the docs.
  3. Navigate through passages.
  4. Inspect the DOM.

elements

When looking through the engine's code for outgoing passages, I found this snippet:

if (typeof Config.passages.transitionOut === 'string') {
    $outgoing.on(Has.transitionEndEvent, ev => {
        if (ev.propertyName === Config.passages.transitionOut) {
            $outgoing.remove();
        }
    });
}

I decided to console log this event by adding the following to my Story JavaScript.

$(document).on(':passagerender', () => {
    $('.passage').on(Has.transitionEndEvent, ev => console.log(ev) );
});

console

As seen above, propertyName is not a property of the event object, but rather a property of the event object's originalEvent property object.

Possible fix is to change the condition in the engine's code from ev.propertyName === Config.passages.transitionOut to (ev.propertyName ?? ev.originalEvent?.propertyName) === Config.passages.transitionOut.