search

uikit / uikit

A lightweight and modular front-end framework for developing fast and powerful web interfaces
http://getuikit.com
MIT License
18.32k stars 2.32k forks source link

Offcanvas: transition not applied on close #2913

Closed fabien closed 7 years ago

fabien commented 7 years ago

Browser

Chrome 61.0.3163.100 on Mac

Reproduction Link

https://codepen.io/anon/pen/Nawgqm

Steps to reproduce

Clicking on 'open' will show the first offcanvas modal. When clicking 'stack' it will open another modal on top. So far so good.

What is Expected?

When closing the stacked modal, there should be a smooth animated transition as usual.

What is actually happening?

Currently there is no transition when closing, causing an immediate and abrupt disappearance.

I was able to trace the issue down to this line: https://github.com/uikit/uikit/blob/develop/src/js/core/offcanvas.js#L165

The this.getActive() && this.getActive() !== this check does not cope with 'stack' being true. When changed into: !this.stack && this.getActive() && this.getActive() !== this it works fine. What puzzles me is that having no code at all for the hide event handler, the modal still closes without any issues.

aarongerig commented 7 years ago

Ummm... where did you find the stack option for the off-canvas component? I haven't found it in the documentation nor inside the code. Am I missing something?

fabien commented 7 years ago

Well, that's true indeed ... however, the Modal mixin is applied to the off-canvas component, which makes it inherit those properties. Besides, it has been working well for me, except for this minor glitch, the off-canvas can be treated exactly like the Modal component. Which might be useful to point out in the documentation as well.

fabien commented 7 years ago

Here's the Pen from above, with a workaround applied: https://codepen.io/anon/pen/zEPEqV

aarongerig commented 7 years ago

Ahh gotcha, haven't noticed that. I think your "hotfix" would be a good approach to solve the issue. Maybe you could provide a PR to fix that? :)

fabien commented 7 years ago

There's actually an additional issue, which is the (in my experience) notorious 'bubbling transitionend' effect: the uk-close button has a css transition applied as well, which causes the transitionend event to fire prematurely due to the hover effect that happens during clicking on the button, bubbling up to the handler that is actually only watching for the offcanvas animation to complete.

Because of this, there's a visual difference between closing the modal using the mouse or using the esc key. It's very subtle, though. If you click without moving the cursor much, it will still be unaffected by it and look smooth as expected. I'm trying to get this issue resolved right now.

I don't know how effective a PR is though - I haven't seen much activity lately, let alone issues being closed much. In that case, the documentation should also be updated btw.

aarongerig commented 7 years ago

You're totally right, documentation is lacking especially for the javascript part. The devs were on vacation and also had some other events to plan and attend, that's why things got a bit slower than before. Luckily they started to work on UIkit again, which you can see by all the commits from today for example (removing the jQuery dependency). I'd give it a shot with a PR. ;)

janschoenherr commented 7 years ago

Please checkout the latest dev version and test if the issues remain.

janschoenherr commented 7 years ago

This seems abandoned, please create a new issue if it persists.