Class Slide
Slide transitions move an element using CSS transform: translate().
The direction, distance, and optional fade can all be configured.
Note: Because Slide uses the CSS transform property,
it cannot be combined with Grow on the same element — the last one
applied will overwrite the other's transform value.
Usage:
// Slide left and fade out
panel.addTransition(new Slide().setDirection(Direction.LEFT));
panel.transitionForward();
// Slide up 50px without fading
panel.addTransition(new Slide()
.setDirection(Direction.UP)
.setDistance("50px")
.setWithFade(false));
- 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.Returns the slide direction.Returns the slide distance.protected String[]Returns the CSS property names that this transition animates.booleanReturns whether the slide includes a fade.voidrestoreOriginalState(CssStyle style, CssStyle snapshot) Restores previously saved property values to the given style.setDirection(Direction direction) Sets the slide direction.setDistance(String distance) Sets the slide distance as a CSS length value.setWithFade(boolean withFade) Sets whether the slide includes a simultaneous fade to transparent.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, getTimingFunction, setDuration, setSpeed
-
Constructor Details
-
Slide
public Slide()Constructs a Slide transition that slides down with fade.
-
-
Method Details
-
setDirection
Sets the slide direction.- Parameters:
direction- the direction to slide- Returns:
- this Slide for method chaining
-
setDistance
Sets the slide distance as a CSS length value.- Parameters:
distance- the distance (e.g.,"100%","50px","10rem")- Returns:
- this Slide for method chaining
-
setWithFade
Sets whether the slide includes a simultaneous fade to transparent.- Parameters:
withFade- true to fade during the slide, false for slide only- Returns:
- this Slide for method chaining
-
getDirection
Returns the slide direction.- Returns:
- the direction
-
getDistance
Returns the slide distance.- Returns:
- the CSS distance value
-
isWithFade
public boolean isWithFade()Returns whether the slide includes a fade.- Returns:
- true if fading during slide
-
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
-