2023年6月21日发(作者：)
html+css实现滚动到元素位置显⽰加载动画效果每次滚动到元素时，都显⽰加载动画，如何添加？元素添加初始参数以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。添加初始数据，默认透明度0、左右分别移动100px。//左侧容器 .item-leftContainer { opacity: 0; transform: translateX(-100px); } //右侧容器 .item-rightContainer { opacity: 0; transform: translateX(100px); }添加动画数据在less中添加动画数据。这⾥只设置了to，也可以省略第1步中的初始参数设置⽽在动画⾥设置from。执⾏后，透明度由0到1，俩个容器向中间移动100px回到原处。//动画 @keyframes showLeft { to { opacity: 1; transform: translateX(0px); } } @keyframes showRight { to { opacity: 1; transform: translateX(0px); } } @keyframes hideLeft { to { opacity: 0; transform: translateX(-100px); } } @keyframes hideRight { to { opacity: 0; transform: translateX(100px); } }触发动画页⾯加载/刷新触发 -在componentDidMount中执⾏页⾯滚动时触发 - 在componentDidMount、componentWillUnmount添加监听/注销页⾯滚动的事件校验当前滚动⾼度与元素的位置差异：ffset（滚动距离） + windowHeight（窗⼝⾼度） > Top （元素的相对位置）+parentOffsetTop（⽗元素的相对位置） + 200真正的滚动视觉位置 - ffset（滚动距离） + windowHeight（窗⼝⾼度）元素距离顶部的⾼度 - 这⾥使⽤了Top + parentOffsetTop，原因是⽗容器使⽤了absolute绝对定位。如果是正常布局的话，使⽤元素当前的位置Top即可额外添加200⾼度，是为了优化视觉体验。当超出200⾼度时才触发动画当页⾯滚动到下⽅，触发显⽰动画；当页⾯重新滚动到上⽅，触发隐藏动画。componentDidMount() { crollHeightAndLoadAnimation(); ntListener('scroll', ndleScroll); } componentWillUnmount() { EventListener('scroll', ndleScroll); } bindHandleScroll = (event) => { crollHeightAndLoadAnimation(); } checkScrollHeightAndLoadAnimation() { const windowHeight = eight; let parentEelement = mentById("softwareUsingWays-container") as htmlElement; const parentOffsetTop = Top; let leftElement = (mentsByClassName("item-leftContainer") as htmlCollectionOf
2023年6月21日发(作者：)
html+css实现滚动到元素位置显⽰加载动画效果每次滚动到元素时，都显⽰加载动画，如何添加？元素添加初始参数以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。添加初始数据，默认透明度0、左右分别移动100px。//左侧容器 .item-leftContainer { opacity: 0; transform: translateX(-100px); } //右侧容器 .item-rightContainer { opacity: 0; transform: translateX(100px); }添加动画数据在less中添加动画数据。这⾥只设置了to，也可以省略第1步中的初始参数设置⽽在动画⾥设置from。执⾏后，透明度由0到1，俩个容器向中间移动100px回到原处。//动画 @keyframes showLeft { to { opacity: 1; transform: translateX(0px); } } @keyframes showRight { to { opacity: 1; transform: translateX(0px); } } @keyframes hideLeft { to { opacity: 0; transform: translateX(-100px); } } @keyframes hideRight { to { opacity: 0; transform: translateX(100px); } }触发动画页⾯加载/刷新触发 -在componentDidMount中执⾏页⾯滚动时触发 - 在componentDidMount、componentWillUnmount添加监听/注销页⾯滚动的事件校验当前滚动⾼度与元素的位置差异：ffset（滚动距离） + windowHeight（窗⼝⾼度） > Top （元素的相对位置）+parentOffsetTop（⽗元素的相对位置） + 200真正的滚动视觉位置 - ffset（滚动距离） + windowHeight（窗⼝⾼度）元素距离顶部的⾼度 - 这⾥使⽤了Top + parentOffsetTop，原因是⽗容器使⽤了absolute绝对定位。如果是正常布局的话，使⽤元素当前的位置Top即可额外添加200⾼度，是为了优化视觉体验。当超出200⾼度时才触发动画当页⾯滚动到下⽅，触发显⽰动画；当页⾯重新滚动到上⽅，触发隐藏动画。componentDidMount() { crollHeightAndLoadAnimation(); ntListener('scroll', ndleScroll); } componentWillUnmount() { EventListener('scroll', ndleScroll); } bindHandleScroll = (event) => { crollHeightAndLoadAnimation(); } checkScrollHeightAndLoadAnimation() { const windowHeight = eight; let parentEelement = mentById("softwareUsingWays-container") as htmlElement; const parentOffsetTop = Top; let leftElement = (mentsByClassName("item-leftContainer") as htmlCollectionOf
发布评论