Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-02

<af:transition>

transition transition

The transition tag is a way to define transitions for some parent component like af:deck. Not all components support all triggerType and transition values. Not all triggerTypes support all transitions. Web browser support is limited so you may not see an animation if you are using an older browser. This tag does not support children tags. This tag must be a child of a component tag that supports transitions. Refer to the parent component documentation for details.

Include an external CSS file:

<af:deck displayedChild="#{demoBean.displayedChild}"> <af:transition triggerType="backNavigate" transition="flipEnd"/> <af:transition triggerType="forwardNavigate" transition="flipStart"/> <af:outputText id="child1" value="Child 1"/> <af:outputText id="child2" value="Child 2"/> </af:deck>

Attributes

Name	Type	Supports EL?	Description

triggerType String yes The non-null trigger type of the transition. Acceptable values include:

• "backNavigate": Used by af:deck when transitioning from a later child to an earlier child (in terms of sibling order).
• "forwardNavigate": Used by af:deck when transitioning from an earlier child to a later child (in terms of sibling order).
• "replace": Used by af:deck when transitioning a component that is being replaced through partial page refresh (PPR).
• "dataChange": Used by DVT components when data is changed.
• "display": Used by DVT components when a display is toggled.
• "drill": Used by DVT components when drilling.
• "layerChange": Used by DVT components when a layer is changed.
• "mapChange": Used by DVT components when a map is changed.

transition String yes The non-null name of the transition desired for this trigger type. The actual animation may vary from what is described here. Acceptable values include:

• "none": No animation between views; the default and also the type used if another specified animation type is not supported on a platform.
• "auto": Leave the decision up to the parent component.
• "fade": A gradual opacity change between the views.
• "flipUp": Imagine the 2 views sandwiched, the bottom of the sandwich moves toward the user and continues upward until the sandwich is flipped a full 180 degrees.
• "flipDown": Imagine the 2 views sandwiched, the top of the sandwich moves toward the user and continues downward until the sandwich is flipped a full 180 degrees.
• "flipStart": Imagine the 2 views sandwiched, the end of the sandwich moves toward the user and continues in the start direction until the sandwich is flipped a full 180 degrees.
• "flipEnd": Imagine the 2 views sandwiched, the start of the sandwich moves toward the user and continues in the end direction until the sandwich is flipped a full 180 degrees.
• "flipLeft": Imagine the 2 views sandwiched, the right of the sandwich moves toward the user and continues in the left direction until the sandwich is flipped a full 180 degrees.
• "flipRight": Imagine the 2 views sandwiched, the left of the sandwich moves toward the user and continues in the right direction until the sandwich is flipped a full 180 degrees.
• "slideUp": Imagine the 2 views stacked vertically, they both move up.
• "slideDown": Imagine the 2 views stacked vertically, they both move down.
• "slideStart": Imagine the 2 views stacked horizontally, they both move in the start direction.
• "slideEnd": Imagine the 2 views stacked horizontally, they both move in the end direction.
• "slideLeft": Imagine the 2 views stacked horizontally, they both move in the left direction.
• "slideRight": Imagine the 2 views stacked horizontally, they both move in the right direction.