背景
最近一段时间做了几个需求,其中涉及的素材列表展示,需要实现类似下方图片中的动效,暂且称之为【卡片放大播放动效】,具体细节如下:
(相关资料图)
初始展示的是封面图片,鼠标经过时是视频放大的效果;下方文字内容区域,在放大前后展示的内容不同,而且两者的字体大小是一致的,不是简单的放大实现;四五个页面都需要实现相同列表效果,列表的行数和列数是不一致的;遇到的四个问题在整个实现过程中,遇到以下四个问题,后面的解析中会有对应解答。
不同元素间的放大过渡效果如何实现?抽离为通用性组件时,如何实现类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
.container{position:relative;.poster{position:relative;background-position:center;background-size:cover;background-repeat:no-repeat;.player{z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0.929);animation:showPlayer0.2sease;animation-fill-mode:forwards;.playerBottom{width:100%;position:absolute;top:100%;left:0;box-shadow:0px6px16px-8pxrgba(0,0,0,0.08),0px12px48px16pxrgba(0,0,0,0.03);filter:drop-shadow(0px9px28pxrgba(0,0,0,0.05));}}}.posterBottom{width:100%;}}@keyframesshowPlayer{0%{transform:translate(-50%,-50%)scale(0.929);}100%{transform:translate(-50%,-50%)scale(1);}}2. 抽离为通用组件时,卡片底部文字区域如何动态替换
整个卡片组件,底部的文字区域在不同的场景下可能是不同的,所以作为通用性组件,需要将这部分抽离,支持动态替换。
vue中最简单的方式,就是插槽,通过插槽从外部动态传入。但是react框架是不支持具名插槽的。所以,这个问题就转换成了,react如何实现具名插槽?
网上搜到了一种实现方式,通过传入一个object来实现,具体效果如下:
//cardList{{posterBottom:bottomInfo,playerBottom:bottomInfo,onClickPlayer:()=>{consturl=`${window.location.origin}/#/market/service/${item.itemId}`;window.open(url,"_blank");},}}//VideoItem {props.children?.playerBottom} {props.children?.posterBottom}
当然,具名插槽还有其它的实现方式,后面会专门写一篇文章总结学习下。
3. 列表容器如果是弹性布局时,每行的列数无法固定,flex布局无法满足这个问题是一个通用性问题,在容器宽度不固定时,flex布局,每行最后一个元素无法选中设置样式,同时子元素个数不固定时,最后一行元素的间距会变大。
这种情况下,就需要grid布局大显身手了,以前很少用grid布局,这次也是学习到了,具体效果如下图:
在示例中,调整浏览器窗口大小,来实验弹性布局观看效果代码片段
4. 卡片放大后,可能会被容器设置的overflow:hidden给遮盖隐藏掉目前放大效果的实现方式,放大的视频层是绝对定位的,参照物是每个卡片本身。所以在四周边界处的卡片,放大后,很容易被容器给遮盖。
处理方式也很简单,给容器多设置一些padding,让放大部分足够展示,然后用margin设置负值来调整布局
.container{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}总结
每个产品需求里,可能都会隐藏着自己的盲点,将效果做到极致,就能获得技术成长。在重复的需求里,多反思总结,寻找自己的提升点,这就是进步吧啊。
相关推荐1.CSS 实现按钮点击动效的套路
2.年份数字拼图效果
3.跑马灯简单版
4.中心点靠近动画解析
继8月11日、14日连续两次召开电力保供工作紧急视频会议后,8月15日,四川再次召开电力保供调度会。记者从会上获悉,预计全省最大用电负荷将
今年以来,四川积极扩大能源领域有效投资,前7月能源项目累计完成投资493亿元、同比增长4%。8月15日,省能源局相关负责人介绍,前7月煤炭类
8月15日,全省防汛减灾、森林草原防灭火工作电视电话会议召开,深刻汲取彭州8·13山洪灾害教训,分析研判当前形势,安排部署下一步重点工作
8月9日,攀枝花技师学院实习工厂里,焊花四溅,机器声此起彼伏。身穿工作服的教师周树春,在一间间操作室里进进出出,指导学生们焊接。过去
记者从省发改委获悉,上半年全省物流需求平稳增长,行业运行总体平稳。全省社会物流总额64096 2亿元,同比增长4 4%;全省物流业总收入为2270
在全球最大地下工程装备制造基地,掘进机生产计划已排到年底;千亿级工程机械产业园区边建设边生产,打造智能制造标杆……时已立秋,三湘大
上犹县水岩乡卫生院医生蔡昌才驱车前往金盆村为村民骆运招治病。以往,每月去医院就诊不仅路途远,还要排队。这几年有了家庭医生后,直接送
今年2月以来,省药监局深入开展药品安全专项整治行动,坚持问题导向,以严厉打击违法犯罪行为、全面排查风险隐患为手段,推进专项整治行动
没想到,现在直接在窗口就能办理,真是太方便了。蒋琼在九江市经营一家造型工作室,近期有意扩大生意规模,需要资金周转。她带齐资料来到九
记者从新余海关获悉,今年上半年,新余市外贸取得了较好成绩,全市外贸进出口总值184 3亿元,同比增长84 3%,高出全国平均水平74 9个百分点
作为南昌市第二季度集中开工的重大项目之一,南昌数谷产业园项目总投资100亿元,计划2024年5月完工交付使用,拟引进字节跳动、华为(南昌)工
淮南市向中国工程院院士、安徽理工大学校长袁亮颁发了第一张淮南市高层次人才优才卡。为深化我为人才办实事实践活动,落实高层次人才服务保
连日来,宿州市埇桥区不断细化各项工作举措,压实防汛各项责任,提升应急救援保障能力,筑牢防汛安全堤。目前,该区防汛物资已储备到位,全
近日,无为市自然资源和规划局、无为市福渡镇人民政府在无为润峰中海置业有限公司项目部现场举行交地即交证颁证仪式,标志该市交地即交证优
设施齐全的卫生食堂、水冲式的独立卫生间、楼道墙体粉刷一新的宿舍……走进安徽省全椒县武岗学校,已经运行满一年的农村特色寄宿制学校成果
安徽安庆市正式成立“老年助餐慈善基
记者日前从安庆市民政局获悉,该市慈善会近日设立老年助餐慈善基金,共同守护老年人舌尖上的幸福。该基金专项用于资助城乡社区老年食堂、社
安徽淮北积极落实2022年电网防汛度汛
近日,国网淮北供电公司工作人员来到110千伏中泰变电站开展防汛隐患排查。该公司积极落实2022年防汛度汛措施,提前细化应急预案,推进极端
安徽全椒县完善拓展人力信息资源助企
今年以来,全椒县不断完善拓展人力资源信息库、劳务对接信息库、企业用工需求信息库三库信息资源,已摸排400多家次企业缺工岗位信息1 2万个
宿州市埇桥区柔性引进博士推进乡村振
宿州市埇桥区实施博士汇工程,柔性引进29名博士担任副乡镇长或园区副主任,他们将为加快产业发展、推进乡村振兴强化智力支持。目前,博士专
安徽印发出台全面实施零基预算改革方
为进一步提高财政资源配置效率和资金使用效益,省政府印发《安徽省全面实施零基预算改革方案》,明确从编制2023年预算起,在全省范围内全面
5月份安徽居民消费价格同比上涨2.3%
近日,国家统计局安徽调查总队发布了我省5月份居民消费价格统计数据。统计显示,我省居民消费价格同比上涨2 3%,同比涨幅比上月回落0 4个百分
安徽多种方式引导群众防范非法集资风
合肥地铁1号线、3号线上滚动播放防范非法集资宣传视频,淮南市发布《致老年群众的一封信》……6月份是一年一度防范和处置非法集资宣传月,今
铁路部门持续加大长三角地区运力投放
记者从中国铁路上海局集团有限公司获悉,随着上海疫情防控形势持续向好,为进一步适应旅客出行需要,助力复工复产,铁路部门自6月10日起持续加
安徽六安持续精准施策全力促进工业发
六安市与蔚来汽车签署合作协议,共建智能电动汽车零部件配套产业园区。该园区一期计划2023年上半年投产,建成后将具备年产30万吨铝压铸产能,
安徽淮北全力维护外卖送餐员合法权益
为切实防范化解新业态领域重大风险隐患,强化外卖送餐员权益保障工作,淮北市市场监管局充分发挥职能作用,全力维护外卖送餐员合法权益。淮北
湖南涟源开展专项行动一对一为企业纾
位于涟源市的湖南三合美新材料科技有限公司,两条生产线满负荷运行,生产聚氨酯和岩棉复合板。因产品升级与产能扩充,急需新增两条生产线,
湖南蓝山县进村入户排查整治自建房安
老叔,这栋房屋墙体有开裂痕迹,要维修加固,安全重要!5月20日,蓝山县塔峰镇果木村,党员干部上门开展农村自建房安全隐患排查整治。连日来
一季度湖南万元产值综合能耗同比下降
近日,湖南省工业通信业节能监察中心发布一季度全省六大高耗能行业能源消耗统计监测报告。据该报告,一季度全省146家主要高耗能企业的万元
济南起步区一年来累计签约优质项目11
万里黄河第一隧济南黄河济泺路隧道建成通车,占地4000余亩的新能源乘用车零部件产业园加快施工……记者21日采访获悉,建设实施方案获批复一
山东发布通知启动传统民居保护利用试
省住房城乡建设厅、省财政厅近日联合印发《关于做好传统民居保护利用试点工作的通知》,在全省部署开展传统民居保护利用试点工作。此次试点