在拖动时反应弹簧动画或单击

时间:2020-07-21 15:16:32

标签: javascript reactjs animation drag-and-drop react-spring

我想使用 USE SSISDB; IF EXISTS ( SELECT TOP 1 * FROM catalog.executions WHERE folder_name = 'MasterControl' AND project_name IN ('AJRR', 'SER', 'RC') AND status = 2 ) BEGIN ;THROW 51000, 'Job is still running previous instance. Fail', 1 END react-spring制作轮播动画,可以通过拖动或单击按钮来激活该动画。

我想出了一个解决方案:https://codesandbox.io/s/viewpager-6o78r?file=/src/index.js

react-use-gesture放入动画帧的循环中,但是我觉得必须有更好的方法。我的操作方式可能不太流畅,因为我没有放松等。是否可以在已经为之创建的弹簧上使用setTimeoutfrom属性通过拖动手势使用?

1 个答案:

答案 0 :(得分:0)

我还没有使用useSprings函数,但是我想出了一个更简单的解决方案:

.tablewrapper4 {
  height: 580px;
    overflow-y: auto;
}

当您在图像的结尾时,我还添加了一个可选的动画,以得到您在结尾的反馈。它有两个状态,即100像素过灰和反灰。我使两个状态都带有超时,但是可以用更优雅的方式完成。

  const handleNextPage = () => {
    if (index.current < pages.length - 1) {
      index.current = index.current + 1
      set(i => ({
        x: (i - index.current) * window.innerWidth,
        scale: 1,
        display: 'block'
      }))
    } 
  }

整个示例:https://codesandbox.io/s/viewpager-5pgl5?file=/src/index.js