Class Collapse
Collapse transitions animate max-height (vertical) or max-width
(horizontal) to zero, creating an accordion-style collapse effect. The element's
overflow is set to hidden during the transition.
Limitation: CSS cannot transition height: auto, so this
class uses max-height: 2000px as the default expanded value. If your content
exceeds 2000px, set a larger max-height on the element before triggering the transition.
Usage:
// Vertical collapse (accordion)
panel.addTransition(new Collapse());
panel.transitionForward(); // collapses
panel.transitionReverse(); // expands
// Horizontal collapse
sidebar.addTransition(new Collapse().setAxis(Axis.HORIZONTAL));
sidebar.transitionForward();
- Since:
- 2026
- Version:
- 1.0
- Author:
- Marvin P. Warble Jr.
- See Also:
-
Constructor Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionvoidapplyEndState(CssStyle style) Applies the transition's end state to the given style.getAxis()Returns the collapse axis.protected TransitionTimingFunctionReturns the timing function for this transition.protected String[]Returns the CSS property names that this transition animates.voidrestoreOriginalState(CssStyle style, CssStyle snapshot) Restores previously saved property values to the given style.Sets the collapse axis.voidsnapshotCurrentState(CssStyle current, CssStyle snapshot) Saves the current values of the transition's properties from the element's style.Methods inherited from class com.oorian.css.transitions.Transition
buildTransitionValue, buildTransitionValue, getDurationMs, setDuration, setSpeed
-
Constructor Details
-
Collapse
public Collapse()Constructs a Collapse transition that collapses vertically.
-
-
Method Details
-
setAxis
Sets the collapse axis.- Parameters:
axis-Axis.VERTICALfor max-height,Axis.HORIZONTALfor max-width- Returns:
- this Collapse for method chaining
-
getAxis
Returns the collapse axis.- Returns:
- the axis
-
getTimingFunction
Returns the timing function for this transition.The default is
TransitionTimingFunction.EASE. Subclasses may override to use a different timing function (e.g.,CollapseusesTransitionTimingFunction.EASE_IN_OUT).- Overrides:
getTimingFunctionin classTransition- Returns:
- the timing function
-
getTransitionProperties
Returns the CSS property names that this transition animates.Subclasses return the CSS properties they modify (e.g.,
"opacity","transform","max-height"). These are used to build the CSStransitionshorthand.- Specified by:
getTransitionPropertiesin classTransition- Returns:
- an array of CSS property names
-
applyEndState
Applies the transition's end state to the given style.This method sets the CSS property values that represent the final state of the transition. For example, a fade-out sets
opacity: 0.- Specified by:
applyEndStatein classTransition- Parameters:
style- the CssStyle to apply end-state values to
-
snapshotCurrentState
Saves the current values of the transition's properties from the element's style.Before a transition plays forward, the current property values are saved so they can be restored when playing in reverse. If a property has no current value, the subclass should save a sensible default (e.g.,
"1"for opacity).- Specified by:
snapshotCurrentStatein classTransition- Parameters:
current- the element's current CssStyle to read values fromsnapshot- the CssStyle to save values into
-
restoreOriginalState
Restores previously saved property values to the given style.This method copies values from the snapshot back to the element's style, causing the browser to animate back to the original state.
- Specified by:
restoreOriginalStatein classTransition- Parameters:
style- the CssStyle to restore values tosnapshot- the CssStyle containing previously saved values
-