skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 08:36:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Reposition overlays after ancestor CSS transitions (reveal animations)

Browse Source 
Use a document-level transitionend listener instead of per-element
listeners, so overlays reposition when a parent's transform transition
ends (e.g. reveal animations with translateY on an ancestor container).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-28 16:15:12 -07:00
co-authored by Claude Opus 4.6
parent 05c9776fd8
commit 3818073268
2 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/critique/scripts/detect-antipatterns-browser.js
+13
View File
@@ -1301,6 +1301,19 @@ if (IS_BROWSER) {
}
}, { rootMargin: '99999px' });
// Reposition overlays after CSS transitions end (e.g. reveal animations).
// Listens at document level so it catches transitions on ancestor elements
// (the transform may be on a parent, not the flagged element itself).
document.addEventListener('transitionend', (e) => {
if (e.propertyName !== 'transform') return;
for (const o of overlays) {
if (!o._targetEl || o.classList.contains('impeccable-banner') || o.style.display === 'none') continue;
if (e.target === o._targetEl || e.target.contains(o._targetEl)) {
positionOverlay(o);
}
}
});
const highlight = function(el, findings) {
const fixed = isInFixedContext(el);
const rect = el.getBoundingClientRect();
source/skills/critique/scripts/detect-antipatterns.mjs
+13
View File
@@ -1299,6 +1299,19 @@ if (IS_BROWSER) {
}
}, { rootMargin: '99999px' });
// Reposition overlays after CSS transitions end (e.g. reveal animations).
// Listens at document level so it catches transitions on ancestor elements
// (the transform may be on a parent, not the flagged element itself).
document.addEventListener('transitionend', (e) => {
if (e.propertyName !== 'transform') return;
for (const o of overlays) {
if (!o._targetEl || o.classList.contains('impeccable-banner') || o.style.display === 'none') continue;
if (e.target === o._targetEl || e.target.contains(o._targetEl)) {
positionOverlay(o);
}
}
});
const highlight = function(el, findings) {
const fixed = isInFixedContext(el);
const rect = el.getBoundingClientRect();