feat(short-drama-agent-front): 优化图片加载动效
This commit is contained in:
@@ -33,19 +33,15 @@ describe('资源图片展示与原图预览', () => {
|
||||
expect(wrapper.get<HTMLImageElement>('img').element.style.objectFit).toBe('contain')
|
||||
})
|
||||
|
||||
it('图片加载完成后按网格逐块显现,并在动画结束后移除覆盖层', async () => {
|
||||
vi.useFakeTimers()
|
||||
vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
|
||||
callback(0)
|
||||
return 1
|
||||
})
|
||||
wrapper = mount(AssetImage, { props: { src: '/storage/reveal.png', alt: '加载动效图片' } })
|
||||
expect(wrapper.findAll('.reveal-image-cell')).toHaveLength(16)
|
||||
it('图片加载前显示轻量骨架占位,加载完成后直接淡入图片并移除占位', async () => {
|
||||
wrapper = mount(AssetImage, { props: { src: '/storage/reveal.png', alt: '加载中的图片' } })
|
||||
expect(wrapper.get('.reveal-image').attributes('aria-busy')).toBe('true')
|
||||
expect(wrapper.find('.reveal-image-placeholder').exists()).toBe(true)
|
||||
expect(wrapper.find('.reveal-image-grid').exists()).toBe(false)
|
||||
await wrapper.get('img').trigger('load')
|
||||
expect(wrapper.get('.reveal-image').classes()).toContain('is-loaded')
|
||||
vi.advanceTimersByTime(760)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('.reveal-image-grid').exists()).toBe(false)
|
||||
expect(wrapper.get('.reveal-image').attributes('aria-busy')).toBe('false')
|
||||
expect(wrapper.find('.reveal-image-placeholder').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('cover 仅裁切卡片,点击使用 Naive 原生预览展示同一完整资源,遮罩可关闭', async () => {
|
||||
|
||||
Reference in New Issue
Block a user