Effects are visual indicators that an element is changing from one state to another. Each effect has type and duration of style properties.
Effects are visual indicators that an element is changing from one state to another. Each effect has type and duration of style properties.
For each transition which results in hidden content becoming visible, there are two possibilities.
Existing content is moved to make space for the newly visible content, and forms part of the main page body.
The newly visible content obscures the existing content by overlaying it.
The table shows how each type of transition can be applied. The x indicates that the transition works with the widget. Cells that are blank do not imply that the transition does not work with that widget, they mean that the effect is unlikely to work in a appropriate manner.
| Widget | none | Dropout | Wipe | Slide | Grow | Shrink | Fade | Fold | Puff | Shake | Pulsate |
|---|---|---|---|---|---|---|---|---|---|---|---|
| AJAX Table | |||||||||||
| Autocompleter | x | x | x | x | x | x | x | x | x | x | |
| Carousel | x | x | x | x | x | x | x | x | x | ||
| Clock | x | x | x | x | x | x | x | x | x | x | x |
| Date Picker | x | x | x | x | x | x | x | x | x | x | x |
| Deck | x | x | x | x | x | x | x | x | |||
| Dynamic Menu | x | x | x | x | x | x | |||||
| Field Expander | x | x | x | ||||||||
| Folding Item | x | x | x | x | |||||||
| Simple Forms Validator | x | x | x | ||||||||
| Multiple Forms Validator | |||||||||||
| Forms Wizard | x | x | x | ||||||||
| Gallery | x | x | x | x | x | x | x | x | x | x | |
| Popup | x | x | x | x | x | x | |||||
| Progress Bar | x | x | x | x | x | x | |||||
| Slideshow | x | x | x | x | x | x | x | x | x | x | |
| Stopwatch | x | x | x | x | x | x | x | x | x | x | x |
| Tabs | |||||||||||
| Ticker Tape | |||||||||||
| Timer | x | x | x | x | x | x | x | x | x | x | x |
The Grow and Shrink effects will be replaced by the Slide effect on Opera Mobile due to browsers limitations.
The table lists effects properties, and one pseudo-class, with CSS examples.
| Property | Description | CSS |
|---|---|---|
| mcs-effect-duration | Controls the transition duration. The default value is '1s'. | mcs-effect-duration: 4s; |
| mcs-effect-style | Controls the transition effects. | mcs-effect-style: slide-top; |
| :mcs-concealed | State of an element when it is not displayed, i.e. {display: none;}. | widget|popup:mcs-concealed {mcs-effect-style: puff;} |
The mcs-effect-style property accepts a sequence of comma-separated rules. These rules specify effects which will be used for each widget appearance or disappearance event. Each rule in the series consists of two parts; an effect part and a repeat/time part. The effect part is a name of one of the supported effects, such as fade. The repeat/time part can be one of the following:
A number followed by the time unit means that the given effect should be used for the defined period of time. For example, 'fade 300s' specifies that the fade effect will be used for 300 seconds.
A number without units means that the given effect will be used for the specified number of transitions. For example 'fade 10' specifies that the fade effect should be used 10 times in a row.
If the second part of the rule is not specified, then the given effect will be used indefinitely. Please note that this makes sense only if it is the last rule in the series.
In the following example, the widget will use the slide-left effect for the first 10 transitions, then the none effect for 300 seconds. Finally, the fade effect will be used indefinitely.
mcs-effect-style: "slide-left 10", "none 300s", "fade";If a rule contains only the effect name, quotation marks are not required. Otherwise, each rule in the series must be inside the quotation marks.
The mcs-effect-duration property accepts a series of values, each applying to the effect in the corresponding rule. If there is no value provided, then the default (1s) will be used.
mcs-effect-style: "slide-left 10", "fade 10"; mcs-effect-duration: 2s, 5s;The previous example illustrates the case when the widget will use the slide-left effect with a duration of 2 seconds for the first 10 transitions. For the next 10 transitions it will use the fade effect with a duration of 5 seconds. After that the full sequence repeats.
This mechanism is deprecated. Refer to mcs-effect-style for more information.
Setting the mcs-effect-style property to 'random' will apply transition effects randomly. However, the effects will be limited to those suitable for the selected action. So for example, if random is specified as an appearance effect, only the effects that are appropriate in such a case will be used. Effects can be picked up from the whole library of widget effects or from the defined list only.
In the following example, an effect will be randomly chosen from the specified list.
mcs-effect-style: "random(slide-left, slide-right, slide-top, slide-bottom)"It is your responsibility to use random(effects-list) to limit the choice to effects supported by the selected widget.