uikit / uikit

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

modal, custom animation #3159

Open samanmohamadi opened 6 years ago

samanmohamadi commented 6 years ago

it would be nice if there was a possibility to use another animation for modals. for example, Scale Up

spiritedsnowcat commented 6 years ago

Agreed, or having a faster default animation using uk-animation-fast. A workaround is that you can disable the animation by setting transition: none; on the uk-modal-dialog div, and then use your own animation. For example:

<div style="transition: none;" class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical uk-animation-fade uk-animation-fast" uk-overflow-auto>
    <button class="uk-modal-close-default" type="button" uk-close></button>
    Blah blah blah
</div>

Here's scale up: https://codepen.io/anon/pen/VXoJRz

Edit: Maybe it would be nice to have a uk-animation-clear as well.

luxlogica commented 5 years ago

It is possible to override the animation with a .hook-modal-dialog(), but you then have to specify the animation 'manually', from scratch, overriding the pre-defined transform that the modal dialog uses. Using the hook, UIkit also does an 'out' animation in reverse by default. For example, to change the animation so we get a 'slide-left' that is longer than the default animation, we could use:

.hook-modal-dialog() {
  transform: translateY(0px) translateX(-300px);
  transition: 0.8s ease-out;
}

It's not difficult, but it's cumbersome, and it would be infinitely better to be able to just 'plug-in' the animations from the Animation component.