Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.webix.com/desktop__animation.html below:

Animation of Guides, Styling and Animation Webix Docs

Intermediate

Animation is implemented within multiview and pager components. It sets the way the views will be changed as you switch between views or page through the component.

There exist two animation types with their own subtypes:

• slide - in, out, together
• flip - horizontal, vertical

Or, instead, you can choose one of the four animation directions:

• direction - left, right, top, bottom

Multiview uses slide:"together" animation type by default.

Animation can be switched off:

{view:"multiview", animate:false }

Enabling Animation

There are a couple of ways to enable animation:

• include the animate property into the multiview or pager constructor and define the necessary type and subtype:

webix.ui({
   view:"multiview",
   animate:{
      type:"flip", 
      subtype:"vertical"
   },
   cells:[]   
});

• assign the values for the animate property directly out of the multiview constructor. If some values have already been defined with the help of the above-mentioned method, direct assignment will rewrite them:

$$("multi").config.animate.type = "flip";
$$("multi").config.animate.subtype = "vertical";

• use the show() method. The changes will be applied once while showing the stated view. Then, the default values (initial or 'rewritten') will be used.

 $$(id).show({type:"flip", subtype:"horizontal"})

Related sample:  Animated Multiview

Related sample:  Paging Animation Types

The moment of a Webix view initialization can be animated as well. It works for views created dynamically in the existing Webix layout.

To instantiate the component with animation, you should call the webix.ui.animate() method instead of the standard webix.ui():

webix.ui.animate(obj, parent, config);

where:

• obj (object) - configuration of the new component;
• replace (string, number) - ID of the component that will be replaced by the one stated in obj;
• config (object) - optional, animation configuration, described above.
  If not defined the { type:"slide", direction:"left" } animation will be used.

 webix.ui.animate({
    id:"aboutView", template:"About page...",
}, $$("listView"));

Related sample:  Manual View Recreating

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4