The mcs-effect-style property specifies the type of visual effect. The following effects are useful when a widget itself or its element appears or disappears.
The mcs-effect-style property specifies the type of visual effect. The following effects are useful when a widget itself or its element appears or disappears.
The mcs-effect-style property supports two syntaxes, one for use with the Client Framework 1 widgets, and the other for use with the Client Framework 2 components. The Client Framework 1-specific syntax is deprecated. Refer to mcs-effect-style for more information.
| Effect style | Description | Options |
|---|---|---|
| none | No effect is used, the box simply appears or disappears immediately | default |
| fade | The box fades in when appearing and fades out when disappearing | |
| slide-left, slide-right, slide-top, slide-bottom | A slide effect to or from the specific edge | |
| wipe-top | A wipe effect to or from the specific edge | |
| dropout | The box drops and fades out | |
| fold-top-left | The box folds to the specified corner | |
| grow-center, grow-top-left, grow-top-right, grow-bottom-left, grow-bottom-right | The box grows either from the center or from one of the corners | |
| shrink-center, shrink-top-left, shrink-top-right, shrink-bottom-left, shrink-bottom-right | The box shrinks either to the center or to one of the corners | |
| puff | The box expands and fades away |
This Popup widget will appear using the slide-top effect, and disappear using puff effect.
<widget:popup style="mcs-effect-style: slide-top; mcs-concealed:mcs-effect-style: puff;>
<span>hello</span>
<widget:dismiss>Dismiss</widget:dismiss>
</widget:popup>The following effects are typically used on widgets that are already visible but which need to indicate to the user that they have changed in some way.
If these transitions are used as an appearance effect then the containing box appears immediately before the effect starts. If they are used as a disappearance effect then the box disappears immediately after the effect stops.
| Effect style | Description | Options |
|---|---|---|
| shake | Box shakes horizontally | |
| pulsate | Box repeatedly fades in and out | |
| highlight | Box background color changes |
In this example, the highlight effect will change background color from green to red when a elements receive the focus, and back again when they lose it.
a {background-color: green; mcs-effect-style: highlight}
a:focus {background-color: red}