reactjs - 如何根据滚动位置使用 css 动画来执行此操作?
问题描述
这个例子有效,但我想知道是否有更好的方法。
理想的解决方案可以让我根据滚动位置或其他内容更新转换关键帧。这样我就不必处理 javascript 中的复杂计算。
任何帮助或见解将不胜感激。
https://jsfiddle.net/chrischilcoat/19dp24ou/
使用此调用的更新方法。
<div ref={pager} onScroll={update} class="relative w-full overflow-x-auto scrollbar-hide">
更新方法。
const update = () => {
const currentScrollLeft = pager.current.scrollLeft;
currentScrollLeft < 125 ? setScrollPosition(currentScrollLeft) : setScrollPosition(125);
toggleNextBtn();
}
然后我根据滚动位置更新所需的样式。
const [scrollPosition, setScrollPosition] = React.useState();
const pager = React.createRef();
const addWrapperStyles = {
'height': (215 - (scrollPosition / .75))+'px',
'width': (130 - (scrollPosition / 1.7))+'px',
'borderBottomLeftRadius': (0) +'px',
'borderBottomRightRadius': (15 + (scrollPosition / 8)) +'px',
'borderTopLeftRadius': (0) +'px',
'borderTopRightRadius': (15 + (scrollPosition / 8)) +'px',
'paddingTop': (scrollPosition / 15.5)+'px',
};
const addImageStyles = {
'height': (166 - scrollPosition / .92)+'px',
'width': (166 - scrollPosition / .92)+'px',
'borderRadius': (scrollPosition / 2)+'px'
};
const addPlusStyles = {
'marginRight': (scrollPosition / 4)+'px',
'height': (25 - scrollPosition / 16)+'px',
'width': (25 - scrollPosition / 16)+'px',
'borderWidth': '1px',
'right': (scrollPosition / 7)+'px',
'marginLeft': ( scrollPosition / 32)+'px'
};
const addTextStyles = {
'opacity': '.08'
};
React 然后处理插入新的内联样式。
解决方案
推荐阅读
- winapi - Nasm - 不弹出参数的 Winapi 函数
- python - 匹配python列表的excel列
- julia - 在 for eachrow 循环中使用变量会导致错误
- python - mergeTwoLists:内存在 Python 中是如何工作的?
- c# - 如何让我的 writeline 输出显示数值到最接近的 2 位小数?
- django - 使用 django-storages 指向静态文件的 URL
- android - 找不到 org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler 类型对象的参数的方法 classpath()
- javascript - 如何根据 IF-ELSE 结果有条件地更改函数中的变量?
- python - 如何解决在 windows 中安装 setuptools python 时出错
- haskell - Haskell 类型签名:关于 lastButOne 程序类型签名的问题