Animation end broken

[peacechen]

The latest commit (648c677) introduced a check for hasAnimation which prevents the closing animation from happening. The logic looks inverted:

    hasAnimation = $vex.css('animationName') != 'none' && $vex.css('animationDuration') != '0s'

    if animationEndSupport && hasAnimation
       unless beforeClose() is false
             $vex
                .unbind(vex.animationEndEvent).bind(vex.animationEndEvent, -> close())
                .addClass(vex.baseClassNames.closing)

     else
        unless beforeClose() is false
            close()

As far as I can understand, the intent is to animate the close if no current animation is running. Otherwise just close it without interrupting the existing animation. However the logic is inverted such that it won't animate if no current animation is running. The fix:

    if animationEndSupport && !hasAnimation
        unless beforeClose() is false

[adamschwartz]

Thanks for letting us know. We’ll take a look.

[deansimcox]

I just ran into this as well, I think the problem is that the hasAnimation check is looking at the vex container for an animation, where it should be looking at the vex-content element instead?

hasAnimation = $vexContent.css('animationName') != 'none' && $vexContent.css('animationDuration') != '0s'

Might be wrong though?

[deansimcox]

I just tried that above and it seemed to work.

Here's a quick monkey patch:

        var animationEndSupport = false;
        (function(){
            var s;
            s = (document.body || document.documentElement).style;
            animationEndSupport = s.animation !== void 0 || s.WebkitAnimation !== void 0 || s.MozAnimation !== void 0 || s.MsAnimation !== void 0 || s.OAnimation !== void 0;
            return $(window).bind('keyup.vex', function(event) {
                if (event.keyCode === 27) {
                    return vex.closeByEscape();
                }
            });
        }());

        vex._closeByID = vex.closeByID;

        vex.closeByID = function(id) {
            var $vex, $vexContent, beforeClose, close, hasAnimation, options;
            $vexContent = vex.getVexByID(id);
            if (!$vexContent.length) {
                return;
            }
            $vex = $vexContent.data().vex.$vex;
            options = $.extend({}, $vexContent.data().vex);
            beforeClose = function() {
                if (options.beforeClose) {
                    return options.beforeClose($vexContent, options);
                }
            };
            close = function() {
                $vexContent.trigger('vexClose', options);
                $vex.remove();
                $('body').trigger('vexAfterClose', options);
                if (options.afterClose) {
                    return options.afterClose($vexContent, options);
                }
            };
            hasAnimation = $vexContent.css('animationName') !== 'none' && $vexContent.css('animationDuration') !== '0s';
            if (animationEndSupport && hasAnimation) {
                if (beforeClose() !== false) {
                    $vex.unbind(vex.animationEndEvent).bind(vex.animationEndEvent, function() {
                        return close();
                    }).addClass(vex.baseClassNames.closing);
                }
            } else {
                if (beforeClose() !== false) {
                    close();
                }
            }
            return true;
        };

[peacechen]

Bump

Any plans to integrate deansimcox's fix?

[adamschwartz]

Someone just needs to make a PR. Of course it was a PR (#139) which caused the issue in the first place... 😛

[deansimcox]

No worries, I'll make pull request when I get a chance.

[adamschwartz]

Thanks @deansimcox

[deansimcox]

Finally got round to this! See the references above

[peacechen]

Thanks for fixing this. Any chance you could publish the new version on npm?

[deansimcox]

@peacechen Sure, what's the process for publishing to npm - Is it just running the command 'npm publish' ?

[peacechen]

@deansimcox
Basically yes, but make sure the npm credentials on your box are set correctly. The package.json also needs its version field updated to match the version being released.
https://gist.github.com/coolaj86/1318304

Vex-js 2.3.3 is currently published on npm's registry by geekjuice. It would be best if the update was published by the same user.
https://www.npmjs.com/package/vex-js

[geekjuice]

@deansimcox @peacechen [email protected] should be published on npm now 👍

[deansimcox]

Sweet! cheers guys

[jybleau]

Hi @deansimcox @peacechen @geekjuice

Can someone create a new release for version 2.3.4 on github so Bower could offer this version?

Related to: #151

[geekjuice]

Just pushed the v2.3.4 tag. Should be available on bower. Thanks for the heads up that it wasn't published 😅

[jybleau]

No problem. Thank you, it works now.