卡片放大播放效果实现总结，不同元素间的放大过渡效果如何实现?

来源：程序员客栈  |   时间：2023-01-11 01:42:23

背景


(相关资料图)

最近一段时间做了几个需求，其中涉及的素材列表展示，需要实现类似下方图片中的动效，暂且称之为【卡片放大播放动效】，具体细节如下：

初始展示的是封面图片，鼠标经过时是视频放大的效果；下方文字内容区域，在放大前后展示的内容不同，而且两者的字体大小是一致的，不是简单的放大实现；四五个页面都需要实现相同列表效果，列表的行数和列数是不一致的；
image
遇到的四个问题

在整个实现过程中，遇到以下四个问题，后面的解析中会有对应解答。

不同元素间的放大过渡效果如何实现？抽离为通用性组件时，如何实现类vue中的具名插槽效果，来替换下方文字信息区域？不同页面中的列表区域宽度不同，有的页面列表还是弹性宽度，常用的flex布局无法满足要求，如何实现呢？边界卡片放大后，如何避免被父级列表容器overflow:hidden`隐藏掉?实现解析

这个动效，在爱奇艺官网也有类似效果，爱奇艺官网是通过生成初始状态卡片列表和鼠标放大卡片列表两套列表，然后通过动态计算放大卡片位置，相对于body进行绝对定位展示的。

本实现方案通过将卡片初始状态和放大状态，封装到一个组件中，通过两者间的相对关系，利用css自动完成对应关系，避免了大量的JS计算。

1. 放大效果实现

UI对该动效的要求实际就是鼠标视频放大播放，如果卡片初始状态也放置视频video，通过transition对同一元素进行scale放大也可以实现，但是这是一个列表，用户进入页面，就会同时加载多个视频，用户体验不是很好。

所以，实现方案就是卡片初始状态放置poster图片，鼠标经过时，在poster上方展示视频层（绝对定位），然后对视频执行animation动画来模拟放大效果。

卡片底部文字区域如何处理？

由于卡片初始状态下，底部文字区域在列表布局中是占位的，所以在卡片初始状态下，底部文字区域使用正常文档流。

卡片鼠标经过状态下，视频层的放大效果是以poster中心点为放大原点的，所以底部文字区域使用absolute定位，相对于player进行定位处理。

interfaceIItemData{src?:string;poster?:string;industry?:string;}interfaceIProps{posterClass:string;//poster区域宽高playerClass:string;//放大后视频宽高样式itemData:IItemData;children:{[key:string]:any};}lett:NodeJS.Timeout;constVideoItem:FC=({posterClass,playerClass,itemData,children,})=>{const[isHover,setIsHover]=useState(false);constonMouseEnter=()=>{t=setTimeout(()=>{//避免快速移动鼠标，造成视频无法隐藏问题setIsHover(true);},50);};constonMouseLeave=()=>{clearTimeout(t);setIsHover(false);};return(Top1
{isHover?({children?.playerBottom}