creator/cc-1c-skills
1
0
Fork 0
mirror of https://github.com/Nikolay-Shirokov/cc-1c-skills.git synced 2026-06-12 17:04:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(web-test): add fade transitions to showTitleSlide/showImage overlays

Browse Source 
- Fade-in (300ms ease) on show: element created with opacity:0, then
  transitioned to opacity:1 via requestAnimationFrame
- Fade-out (300ms ease) on hide: opacity set to 0, wait 350ms, remove
- Applied to showTitleSlide/hideTitleSlide and showImage/hideImage
- No change to showCaption (instant appearance fits subtitle UX better)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nick Shirokov
2026-03-18 21:28:33 +03:00
parent b68f4145ce
commit b7e3bd876d
1 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/web-test/scripts/browser.mjs
+34 -10
View File
@@ -4213,7 +4213,8 @@ export async function showTitleSlide(text, opts = {}) {
await page.evaluate(({ text, subtitle, background, color, fontSize }) => {
let div = document.getElementById('__web_test_title');
if (!div) {
const isNew = !div;
if (isNew) {
div = document.createElement('div');
div.id = '__web_test_title';
document.body.appendChild(div);
@@ -4222,7 +4223,8 @@ export async function showTitleSlide(text, opts = {}) {
'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%',
`background:${background}`,
'display:flex', 'align-items:center', 'justify-content:center',
'z-index:999999', 'pointer-events:none'
'z-index:999999', 'pointer-events:none',
'transition:opacity 0.3s ease', isNew ? 'opacity:0' : ''
].join(';');
const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\n/g, '<br>');
let html = `<div style="font-size:${fontSize}px;font-weight:600;line-height:1.4;">${esc(text)}</div>`;
@@ -4230,6 +4232,7 @@ export async function showTitleSlide(text, opts = {}) {
html += `<div style="font-size:${Math.round(fontSize * 0.5)}px;margin-top:16px;opacity:0.7;">${esc(subtitle)}</div>`;
}
div.innerHTML = `<div style="text-align:center;max-width:70%;color:${color};font-family:'Segoe UI',Arial,sans-serif;">${html}</div>`;
if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; });
}, { text, subtitle, background, color, fontSize });
// Smart TTS wait (same pattern as showCaption/showImage)
@@ -4245,13 +4248,22 @@ export async function showTitleSlide(text, opts = {}) {
}
}
/** Remove the title slide overlay. */
/** Remove the title slide overlay (with fade-out). */
export async function hideTitleSlide() {
ensureConnected();
await page.evaluate(() => {
const exists = await page.evaluate(() => {
const el = document.getElementById('__web_test_title');
if (el) el.remove();
if (!el) return false;
el.style.opacity = '0';
return true;
});
if (exists) {
await page.waitForTimeout(350);
await page.evaluate(() => {
const el = document.getElementById('__web_test_title');
if (el) el.remove();
});
}
}
/**
@@ -4325,7 +4337,8 @@ export async function showImage(imagePath, opts = {}) {
await page.evaluate(({ dataUrl, fit, bg, useBlur, shadow, maxSize, isFull }) => {
let div = document.getElementById('__web_test_image');
if (!div) {
const isNew = !div;
if (isNew) {
div = document.createElement('div');
div.id = '__web_test_image';
document.body.appendChild(div);
@@ -4334,7 +4347,8 @@ export async function showImage(imagePath, opts = {}) {
'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%',
`background:${bg}`,
'display:flex', 'align-items:center', 'justify-content:center',
'z-index:999999', 'pointer-events:none', 'overflow:hidden'
'z-index:999999', 'pointer-events:none', 'overflow:hidden',
'transition:opacity 0.3s ease', isNew ? 'opacity:0' : ''
].join(';');
let html = '';
@@ -4352,6 +4366,7 @@ export async function showImage(imagePath, opts = {}) {
html += `<img src="${dataUrl}" style="position:relative;${sizeCss}${shadowCss}" />`;
div.innerHTML = html;
if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; });
}, { dataUrl, fit, bg, useBlur, shadow, maxSize, isFull });
// Smart TTS wait (same pattern as showCaption)
@@ -4367,13 +4382,22 @@ export async function showImage(imagePath, opts = {}) {
}
}
/** Remove the image overlay from the page. */
/** Remove the image overlay (with fade-out). */
export async function hideImage() {
ensureConnected();
await page.evaluate(() => {
const exists = await page.evaluate(() => {
const el = document.getElementById('__web_test_image');
if (el) el.remove();
if (!el) return false;
el.style.opacity = '0';
return true;
});
if (exists) {
await page.waitForTimeout(350);
await page.evaluate(() => {
const el = document.getElementById('__web_test_image');
if (el) el.remove();
});
}
}
/**