Animating the modal? about jquery-accessible-modal-window-aria HOT 8 CLOSED

That would be an idea, I have to test.

I'm almost sure it would be possible to create a small delay to start/end an animation before adding/removing it.

from jquery-accessible-modal-window-aria.

I didn't test that much but this would be handy :)

from jquery-accessible-modal-window-aria.

Yop,

a few minutes of testing, and it is not so bad : http://a11y.nicolas-hoffmann.net/modal/ (cf 2nd example, different on mobile and desktop 👍 ).

One remaining point : for ending/closing animation. Do I add a delay parameter in JS to let it execute itself in the other sense. Or get directly animation value with JS ??

from jquery-accessible-modal-window-aria.

I'll go for the delay: apply a class to run the animation (let's say during 1s) then after the delay of 1s remove the <dialog> from DOM (no need to toggle visibility, I guess).

What's your opinion?

from jquery-accessible-modal-window-aria.

I've managed to do it, but it is not intuitive at all. This is the code when you perform a close action.

I get the computed value of animation-duration (0.5s), convert it to ms for jquery delay.
That was the easy part.

         $page.removeAttr('aria-hidden');

         var delay = $js_modal.css( "animation-duration" );
         if ( delay != '0s' ){
             var timeout = parseFloat(delay.replace('s','')) * 1000;
             timeout++;

             $js_modal.removeClass( $class_element );
             setTimeout(function() { $js_modal.addClass( $class_element_reverse ); }, 1);
             setTimeout(function() {
                  $body.removeClass('no-scroll');
                  $js_modal.remove();
                  $js_modal_overlay.remove();
                  $( $focus_back ).focus(); 
                  $js_modal.removeClass( $class_element_reverse );
                  $js_modal.addClass( $class_element );
                }, timeout);
            }
            else {
                  $body.removeClass('no-scroll');
                  $js_modal.remove();
                  $js_modal_overlay.remove();
                  $( $focus_back ).focus();         
                 }

I thought adding a class like this would be enough :

.simple-animated-modal--reverse {
          animation-direction: reverse;
}

The animation has to be set up from a different class name (the easier solution), or you have to trigger a reflow, etc. https://css-tricks.com/restart-css-animation/

The only way I've found to do it is :

• remove the class
• to set up a time out to add the reverse animation class
• and get back to starting conditions.

Sometimes it is not working, I suppose that you have to wait for the animation to be done.
Well, a bit complicated, however, having 2 differents class names could be cool to set up different animations.

Any better ideas ? Maybe transitions with attributes could be easy to manage but less powerful?

from jquery-accessible-modal-window-aria.

I can't have a look right now but I'll try next week. Just reading, it seems a bit complicated. We'll do simpler !

from jquery-accessible-modal-window-aria.

You can see the result here : http://a11y.nicolas-hoffmann.net/modal/ ;) (the code is not yet on Github, I would like to find simpler)

from jquery-accessible-modal-window-aria.

I close it, until we find a better solution ! ;)

from jquery-accessible-modal-window-aria.