使用CSS / React对列表中的“滚动”进行动画处理

时间:2020-04-14 03:10:25

标签: css reactjs animation

我有一个显示一系列步骤的元素,并且有一些控件可以转到上一个/下一个步骤(通过在Redux中设置IOError: System.IO.IOException: Could not add reference to assembly my_cs_script at IronPython.Runtime.ClrModule.AddReference(CodeContext context, String name) at IronPython.Runtime.ClrModule.AddReference(CodeContext context, Object[] references) at Microsoft.Scripting.Interpreter.ActionCallInstruction`2.Run(InterpretedFrame frame) at Microsoft.Scripting.Interpreter.Interpreter.Run(InterpretedFrame frame) at Microsoft.Scripting.Interpreter.LightLambda.Run4[T0,T1,T2,T3,TRet](T0 arg0, T1 arg1, T2 arg2, T3 arg3) at IronPython.Compiler.Ast.CallExpression.Invoke1Instruction.Run(InterpretedFrame frame) at Microsoft.Scripting.Interpreter.Interpreter.Run(InterpretedFrame frame) at Microsoft.Scripting.Interpreter.LightLambda.Run1[T0,TRet](T0 arg0) at IronPython.Compiler.RuntimeScriptCode.InvokeTarget(Scope scope) at IronPython.Hosting.PythonCommandLine.RunFileWorker(String fileName) at IronPython.Hosting.PythonCommandLine.RunFile(String fileName) )。我目前正在用flexify-content:space-between,overflow:hidden在Flex列容器中呈现所有步骤(而不仅仅是可见的步骤)。如果步骤已通过(并且位于容器上方),则currentStepIndex道具为-1,如果当前应显示该道具,则为0,如果即将到来的步骤(位于容器下方)则为1。 css transition属性可为运动赋予动画效果。

pos

当我一次显示一个步骤时,效果很好,因为一个步骤从顶部飞出,另一步从底部飞出,并且列表似乎在滚动。

但是我想一次显示3个步骤,当前步骤在中间。实际上,除了动画之外,我已经完全组装好了。就目前的代码而言,进行下一步时,第一步似乎跳到了容器的中间然后飞起来,随后下一步则以更慢的速度浮动到了新的位置。

我不想使用带有滚动条的容器。我希望整个列表看起来像一起移动,并且可见的步骤始终由flexbox布置(因此,即使我对某些y坐标执行了某种“ scrollTo”行为,我也不认为这会起作用)。出于相同的原因,我不认为操纵每个列表项的top属性都是解决方案(这将要求它们都处于绝对位置:)。

0 个答案:

没有答案