While providing many UI options, Webix is quite short of animations. It can be easily changed though. Let’s check how to add nice animation effects for different Webix controls.
Carousel, MultiView, TabView
TabView is one of two components that have a built-in support for animation. When you are changing the active tab, a new one is shown with some animation. You can use the animate property to configure the details of animation
When closing or opening the panel of accordion, the UI of the widget switches to the new state immediately. It is fine for most cases. Still, it is not very user-friendly, as a user can lose the context after such a straight UI reconstruction. By adding animation to width and height changes, we will get a cute transition effect.
After that we need to add a code for opening and closing events which will replace the existing repainting logic with an attractive animation. Similar to specifying animation in accordion, it can be done for each instance separately or you can create a new view with a custom behavior. Let’s do it by the “per-instance” way:
A lot of code for such simple tasks, but there’s no better way to do it.
In the onAfterOpen handler we are setting the starting height which changes to the actual height after a small delay. It is necessary to trigger the animation.
In the onBeforeClose handler we block the default repainting operation and change the height of a branch instead, which will trigger the animation. After some delay the code calls the close method for the second time to repaint the closed branch.
Window control has a partial animation support by default. When you use position:top, a window control will slide down from the top of the browser:
The fadeInUp and rollOut css classes are taken from animate.css – one of the free animation libraries. You can use any other style of animation supported by animate.css: fading, rolling, bouncing, etc.
Pay attention that it will work only if you have animate.css included on the page.
The trick with animate.css can also be applied to buttons:
Here we have a button that will animate itself after clicking. The addCss command adds the animation style and the removeCss command cleans that style, so the button will be ready for the next click and next round of animation.
The above examples cover most of animation scenarios which you can encounter in real life apps. Even if you find some other use-cases, the techniques described above can be adapted nearly for any scenario. You can use subclassing and event handling to define new behaviors and apply animate.css, effect.css or any other CSS animation library for an actual animation.
If you have some additions or face some problems with the described techniques, feel free to share them in comments.