web-touch-ripple
Advanced tools
web-touch-ripple - npm Package Versions
Changelog
1.4.0
-
Fixed an issue where the element would not be disposed when it was either display: none or its layout calculations were disabled, preventing further animations from being executed.
-
Added
--ripple-min-blur-radiusand--ripple-max-blur-radiuscustom properties to control the minimum and maximum blur radius of the touch ripple effect in percentage-based environments. -
- --ripple-min-blur-radius: The minimum blur effect radius in pixels for the touch ripple effect. Default is 0px.
-
- --ripple-max-blur-radius: The maximum blur effect radius in pixels for the touch ripple effect. Default is 30px.
Changelog
1.3.30
- Fixed an issue where the ripple effect now recalculates the layout when the target element's size changes, preventing problems during dynamic size changes.
Changelog
1.3.20
-
Fixed an issue where the ripple effect would not fully expand when the size of the element changed during ripple spreading, by applying a temporary workaround to mitigate the inconvenience. (future update planned about it).
-
Fixed an issue where the fade-in animation was skipped at the start of the ripple effect. This issue occurred because
requestAnimationFramewas used to handle intermediate steps, causing the element not to reflow when it was unnecessary. As a result, the browser could not determine the transition animation's start and end properly. -
Updated the ripple effect to apply the willChange property, enabling GPU acceleration.
Changelog
1.3.0
- Fixed an issue where, in a gesture arena, if competing gestures (e.g., double-tap and long-tap) were present, the scenario where a gesture should ultimately win after pointer up, even if the competing gestures lose, was not being correctly handled.
- Fixed an issue where using elements like
<div class="ripple">, which could lead to duplication, was replaced with a custom element like<touch-ripple-effect>to manage its own animation and DOM tree removal.
Changelog
1.2.30
- Fixed an issue where applying overflow: hidden to ensure that the touch ripple effect was confined within the child elements caused significant rendering performance degradation. The solution now avoids applying this style when the effect is not present or active, resulting in a substantial performance improvement.
Changelog
1.2.20
- Fixed an issue where certain gesture actions were incorrectly considered as clicks by ensuring that only the main button (e.g., the left button of the mouse) is recognized as clicked.
Changelog
1.2.10
- Fixed an issue where all event callback functions were called twice when the
waitoption was enabled. The cause of this issue is suspected to have occurred during the transition from keyframe-based animation to an independent CSS transition method in a previous update.
Changelog
1.2.0
- Fixed an issue where elements wrapped by touch-ripple or touch-ripple-connection affected the styling of their parent elements, impacting the expected style definitions. For example, even if a child element's height is set to 100%, if the touch-ripple element is the parent, the child's styles may not be applied correctly due to the parent element's influence.