💄 Improve all dialog animations

[cp2004]

What does this PR do and why is it necessary?

Implements #4085, replaces the default slide-in-fade animation with a simple, more performant CSS animation.

How was it tested? How can it be tested by the reviewer?

Applying the patch, opening all the dialogs to view the animation. Make sure none of them are using the slide animation....

Any background context you want to provide?

For ages, I was annoyed by the speed of the animation, looked into it to try and find the slow thing, which was jQuery & BS2's JavaScript animations.

What are the relevant tickets if any?

Closes #4085

Screenshots (if appropriate)

See #4085 for details

TODO

• Apply to all core dialogs. Probably only if the point below is addressed.
• Figure out the closing of the dialogs
  • This is more difficult to do with CSS animations, but I'm working on it. If it is too difficult, we'll need to work out if it is worth it or whether instant-close is acceptable.

[cp2004]

@foosel what do you think about changing all the dialogs?

At the moment I am struggling to get a fade-out animation to work without diving deep into changing the Bootstrap 2 sources. So at the moment, there is a fade in and instant out. Can't hook into the close settings function to trigger an animation in the settings view model since it only covers clicking the settings button, but not the close X, outside the dialog or esc key either.

I definitely think this should be done for settings, since it is the heaviest dialog and is way too slow. But the rest are not as slow because they have relatively less content. Maybe I will experiment so we can see what it feels like.

[foosel]

Frankly, I have no qualms with applying it to all core modals. It's faster, works, and the fading backdrop ain't that important really.

That being said, wasn't there some event triggered on the closing of a modal regardless of the way it is closed? Could this maybe help?

[jneilliii]

That being said, wasn't there some event triggered on the closing of a modal regardless of the way it is closed? Could this maybe help?

I think I tried using this before in a plugin and don't think it exposed correctly the callback.

[cp2004]

There is something like this:

$('#modal').on("hidden", () => {
   // Do something
})

But I think when I tried it, it fired ,after Bootstrap closed the modal. By which point, it is too late to start an animation. At least I think so. Will keep looking, and try and change most of the core dialogs.

[cp2004]

Having changes all the core dialogs to fade in/no animation out, it works. It feels just fine. And quicker & snappier still.

Ready for merge/review 🙂

Oh, and I reduced the animation duration slightly. It is now 300ms, down from 500. Maybe there is an optimum value, it's easily changeable.

[cp2004]

Only outstanding issue seems to be the webcam & timelapse loading - because the content gets loaded later, then the positioning is off. This is actually an issue with the current implementation if things go fast enough - the timing means I can get it to appear below.

I'll add some small CSS tweaks to hopefully predict the sizing of the webcam image and make it the correct size.

[foosel]

So do you consider this ready for merge or should I wait some more?

[cp2004]

It can be merged, it was luck that I found the final issue, I thought I was finished...