StyleClass
StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
- NewAI-powered command palette
- ImprovedFaster theme switching
- FixedCrash on empty filter
Usage #
Examples #
Basic #
StyleClass applies enter and leave animations to a target element declaratively. The target is resolved with the selector option, here @next referring to the next sibling.
This panel is toggled using StyleClass with scale-in and fade-out animations. Click the button again or click outside to dismiss.
Toggle Class #
StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or keywords including @next, prev, parent, grandparent
Animation #
Classes to apply during enter and leave animations are specified using the enterFromClass, enterActiveClass, enterToClass, leaveFromClass, leaveActiveClass,leaveToClassproperties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked, or enable hideOnEscape to close the popup by listening escape key.
Selector #
The target element is resolved with the selector option, which accepts keywords such as @next, @prev, @parent and @grandparent, or any valid CSS selector.
Hide On Resize #
When hideOnResize is enabled, the leave animation is triggered automatically when resizing occurs. Use the resizeSelector property to specify whether to listen to window resize events or element-specific resize events. Set resizeSelector to "window" (default) or "document" for browser resize, or a CSS selector to observe the target element's dimensions.