问题标签 [react-spring]

我试图实现与svg 路径动画的react-spring文档中所示相同的示例，但它会立即呈现：这是我的代码：

这是我的代码框： https ://codesandbox.io/s/9llxp0zx8o

Svg 路径没有像这里的示例 2 那样按预期设置动画：http ://react-spring.surge.sh/spring

我想我在这里遗漏了一些东西。如果有人能找到问题并引导我，我会很高兴。

在项目的 repo 中，react-redux 应用程序在 JS 文件中使用 CSS 设置。现在我应该像这个网站一样用鼠标悬停动画图片：https ://www.madwell.com/

该组件最初是一个功能组件，我已将其更改为基于类的组件，如下所示：

```

```

在此示例中，我能够监听mouse-move事件并相应地获取 x 和 y 坐标。但是现在我必须使用react-spring库来实现它，那么我该怎么做呢？此外，CSS 应该为每个组件编写在单独的 JS 文件中，react-spring例如它们直接修改 Spring 组件中的opacityor trasform，这是我不想要的

他们的文档中给出的弹簧组件示例

我们需要在反应和鼠标悬停时显示过渡，我们必须停止过渡，当我们移出鼠标时它应该恢复？

我们能够显示过渡，但无法实现暂停和恢复功能。

任何建议都会有所帮助。

谢谢

我在我也在使用的 react-redux 应用程序中需要 CSS 方面的帮助，styled-components并向react-spring我的应用程序添加动画

我的整个容器都带有填充物，我需要添加应该在背景中显示的图像，如图所示，请参阅侧面的那些图像

但我的代码有 JSX-components/HTML 元素，如下所示：

所以现在我该如何编写使这些背景图像的容器填充无效，然后在特定点添加它们，如图所示，每个图像组件的 css 如下：

• 请注意，responsiveCSS当站点在具有各种显示尺寸的设备上加载时，它是一个辅助函数。

所以我应该做些什么改变，作为参考，请看这张图片：https ://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.

我正在使用 react-spring 制作一个 Collapse 组件，它接收孩子和一个布尔collapsed道具。这是相当基本的，但由于某种原因，孩子们被安装时的动画永远不会运行，同时让动画效果很好。

这是组件的样子

这是工作代码https://codesandbox.io/s/459p84ky4 我做错了什么还是反应弹簧中的错误？

我试图实现react-spring动画的基本示例，但 Typescript 和编译后的控制台会引发很多错误

我以这个例子为背景：

import { Spring } from 'react-spring'

<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>

{props => <div style={props}>hello</div>}

</Spring>

打字稿抛出：

JSX 元素类型“Spring”没有任何构造或调用签名。

参数“props”隐含地具有“any”类型。

类型“只读<{}>”上不存在属性“切换”。

输入 '{ children: ({ x }: { x: number; }) => Element; 本机：真；来自：{ x：号码；}; 至：{ x：号码；}; 配置：{持续时间：数字；}; }' 不可分配给类型 'IntrinsicAttributes & In trinsicClassAttributes> & Readonly<{ children?: ReactNode; }> & 只读>'。类型“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<{ children?: ReactNode; 上不存在属性“native” }> & 只读>'。

类型“数字”上不存在属性“插值”。

类型“数字”上不存在属性“插值”。

参数“x”隐含地具有“任何”类型。

以及来自控制台的futuremore：

react-dom.development.js:55 未捕获错误：元素类型无效：需要一个字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

上述错误发生在组件中：in div in Unknown。考虑向树中添加错误边界以自​​定义错误处理行为。

React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。在未知

如何克服这些问题？我应该等待带有 typescript 支持的官方软件包，还是应该只为这个库添加全局类型？

我正在尝试使用 Jest 和 Enzyme 对我的 React 组件进行快照测试。一些组件中包含动画组件（从 导入react-spring/react-motion），它将一个函数呈现为其子级。这使得测试变得异常困难。我做了很多研究并提出了3个想法：

• 使用 Enzymemount渲染所有内容，并对其进行快照测试。我发现昂贵的组件不可能/无效，并且生成的快照通常非常重（1MB - 2MB）。
• 使用 Enzymeshallow和快照测试组件。然后找到动画组件，使用 Enzyme's 渲染其中的孩子并对其进行renderProp()快照测试。这很好用，直到我发现renderProp()它不能很好地与<StaggeredMotion />forreact-motion和一起使用react-spring。解决此问题的方法是显式调用函数 as .prop('children')()，然后将整个事情变浅，但代码看起来会很混乱且难以阅读。
• 只需使用酶shallow和快照测试组件。其余的都在图书馆那边。

问题是：我应该使用哪一个？如果这些都不够好，还有哪些选择？提前致谢。

（如果您需要代码示例，我很乐意提供）

我有一个相当简单的淡入场景，我想控制动画的持续时间。但不能围绕如何实现这一点。

代码摘录：

完整代码示例：https ://codesandbox.io/s/n7pw660264

尝试实现键盘触发事件的功能（基于此卡片刷卡示例），似乎无法这样做，因为（我假设）没有重新渲染，因此无法识别状态挂钩/触发down/trigger内部更改useGesture， 任何想法？

我试过了

• useState & useEffect 设置 keydown 状态并区分它们（未识别）
• 将类添加到div基于状态（不使用 Spring 插值）