DOM UI Effects
Overview
The Phenix Design System provides a comprehensive set of JavaScript/TypeScript UI effects that enhance the user experience by adding smooth animations, transitions, and interactive behaviors to your web applications. These effects are designed to be lightweight, performant, and easy to implement.
This documentation covers the core DOM UI Effects functionality, while related features are documented in separate sections:
- For animations and transitions, see Animation System
- For scroll-related effects, see Scroll Effects
- For multimedia interactions, see Multimedia System
Show/Hide Effects
Phenix provides elegant show and hide effects through slide and fade animations. These effects are perfect for creating accordions, dropdowns, modals, and other interactive components.
Slide Effects
Slide effects animate the height of elements to create a smooth expanding or collapsing animation.
slideUp
slideUp(duration?: number = 300, delay?: number = 0): this
Hides elements with a sliding animation that collapses their height to zero.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)
Example:
// Basic usage with default duration and delay
Phenix('.panel').slideUp();
// Custom duration (700ms) and no delay
Phenix('.panel').slideUp(700, 0);
slideDown
slideDown(duration?: number = 300, delay?: number = 0, display?: string = 'block'): this
Shows elements with a sliding animation that expands their height from zero.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)display
: CSS display property value after animation (default: 'block')
Example:
// Basic usage with default values
Phenix('.panel').slideDown();
// Custom duration, no delay, and display as flex
Phenix('.panel').slideDown(700, 0, 'flex');
slideToggle
slideToggle(duration?: number = 300, delay?: number = 0, display?: string = 'block'): this
Toggles the visibility of elements using slide animations. If an element is visible, it slides up; if hidden, it slides down.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)display
: CSS display property value when showing (default: 'block')
Example:
// Toggle visibility with default values
Phenix('.panel').slideToggle();
// Toggle with custom duration, no delay, and display as inline-block
Phenix('.panel').slideToggle(700, 0, 'inline-block');
Fade Effects
Fade effects animate the opacity of elements to create smooth appearing or disappearing animations.
fadeOut
fadeOut(duration?: number = 300, delay?: number = 0): this
Hides elements with a fading animation that reduces their opacity to zero.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)
Example:
// Basic usage with default duration and delay
Phenix('.alert').fadeOut();
// Custom duration (700ms) and no delay
Phenix('.alert').fadeOut(700, 0);
fadeIn
fadeIn(duration?: number = 300, delay?: number = 0, display?: string = 'block'): this
Shows elements with a fading animation that increases their opacity from zero.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)display
: CSS display property value after animation (default: 'block')
Example:
// Basic usage with default values
Phenix('.alert').fadeIn();
// Custom duration, no delay, and display as inline-block
Phenix('.alert').fadeIn(700, 0, 'inline-block');
fadeToggle
fadeToggle(duration?: number = 300, delay?: number = 0, display?: string = 'block'): this
Toggles the visibility of elements using fade animations. If an element is visible, it fades out; if hidden, it fades in.
Parameters:
duration
: Animation speed in milliseconds (default: 300)delay
: Delay before the animation starts in milliseconds (default: 0)display
: CSS display property value when showing (default: 'block')
Example:
// Toggle visibility with default values
Phenix('.alert').fadeToggle();
// Toggle with custom duration, no delay, and display as inline-block
Phenix('.alert').fadeToggle(700, 0, 'inline-block');
Practical Examples
Accordion Implementation
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Section 1</div>
<div class="accordion-content">Content for section 1...</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 2</div>
<div class="accordion-content">Content for section 2...</div>
</div>
</div>
// Hide all accordion content initially
Phenix('.accordion-content').slideUp(0);
// Toggle content when header is clicked
Phenix('.accordion-header').on('click', function(event) {
const content = Phenix(event.target).next('.accordion-content');
content.slideToggle(300);
// Optional: close other open sections
Phenix('.accordion-content').not(content).slideUp(300);
});
Modal Implementation
<button class="modal-trigger" data-target="#exampleModal">Open Modal</button>
<div id="exampleModal" class="modal hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Title</h5>
<button class="close-modal">×</button>
</div>
<div class="modal-body">Modal content goes here...</div>
</div>
</div>
</div>
// Show modal with fade effect
Phenix('.modal-trigger').on('click', function(event) {
const targetId = event.target.getAttribute('data-target');
Phenix(targetId).removeClass('hidden').fadeIn(300);
});
// Hide modal with fade effect
Phenix('.close-modal').on('click', function() {
Phenix(this).ancestor('.modal').fadeOut(300);
});
Integration with Other Features
The DOM UI Effects in Phenix are designed to work seamlessly with other components of the framework:
- DOM Events: Combine with event handling for interactive components
- DOM Traversing: Use traversing methods to find related elements for effects
- Animation System: For more complex animation sequences
- Scroll Effects: For scroll-based interactions and animations
Browser Compatibility
The Phenix UI Effects are built using modern JavaScript techniques and are compatible with all modern browsers. The animations use requestAnimationFrame
for smooth performance and optimal rendering.