标签: react-spring

描述

我正在尝试使用 实现一些视差动画react-spring，但我无法找到一种以响应/统一方式分隔容器的方法。

可重现的片段

在这里，我制作了一个片段，其中包含在滚动时为一些 div 设置动画的基本视差效果：

<Parallax pages={5}>
  <ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>
</Parallax>

问题

具有基于其内容的高度的图层会使它们没有响应，因为每个图层都是从指定offset位置开始的。

结论

如果图层设置为指定的视口高度，我猜这会起作用，但这真的是唯一的方法吗？或者我可能误解了这个组件的用法？

我想将这个库用于本地反应,但无法弄清楚如何.react-native的文档链接已损坏.我可以使用该库进行本地反应吗？

我正在尝试使用 React-spring 安装/卸载组件时创建动画：

    import { Transition, animated } from 'react-spring'
    ...

    export class CompName extends PureComponent<CompNamePropsType> {
      static defaultProps = {
        isExpanded: false,
      }

      render() {
        const {
          isExpanded,
          ...props
        } = this.props

    return (
      <section className={styles.block} {...props}>
        <Transition
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}>
        {isExpanded && (style => (
           <animated.div style={{ ...style, background: "orange" }}>
             <AnotherComp />
           </animated.div>
        ))}
       </Transition>
      </section>
    )
  }
}

但这是行不通的，我收到了一个错误children is not a function。我做错了什么，如何使用react-spring包装器在组件安装/卸载上创建动画？

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

代码摘录：

function BoxA() {
  return (
    <Spring from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
      {props => (
        <div
          style={{
            height: 100,
            width: 100,
            backgroundColor: "pink",
            color: "#fff",
            ...props
          }}
        >
          1
        </div>
      )}
    </Spring>
  );
}

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

以下来自官方示例的简单组件：

import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={props}>I will fade in</animated.div>
}

问题

如何fadeIn再次为效果（或任何其他动画）设置动画，例如当我单击按钮或解决承诺时？

我试图在使用v9.x中的新useTransition 钩子更改react-spring进行过滤时对列表的过渡进行动画处理，以便在过滤列表项时，剩余的项目会移动到新位置。

到目前为止，我已经设法让列表中的组件淡入和淡出，但一旦淡出动画完成，其余组件就会立即跳到新位置。我无法改变这一点。

如何制作剩余组件的动画以顺利移动到新位置？

这是当前代码的代码沙箱链接。

Plum如果您在搜索栏中输入“p”，并观察名称为该名称的组件在短暂延迟后跳跃，则可以最清晰地看到跳跃效果。

App.js

import { useState } from "react";
import { useSpring, useTransition, animated } from "react-spring";

export default function App() {
  const [items, setItems] = useState([
    { name: "Apple", key: 1 },
    { name: "Banana", key: 2 },
    { name: "Orange", key: 3 },
    { name: "Kiwifruit", key: 4 },
    { name: "Plum", key: 5 }
  ]);

  const [searchText, setSearchText] = useState("");

  const filteredItems = items.filter((item) =>
    item.name.toLowerCase().includes(searchText.toLowerCase())
  );

  const …

嗨，我有这个问题，如果我想将 react-spring 安装到我的 React 项目中，它只会弹出一堆依赖项错误和警告，我不知道该怎么办。我试图检查 react-spring 的文档，但找不到任何东西。我在stackoverflow上检查了几页，但仍然没有找到任何有用的东西。有人可以帮忙吗？

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.2
npm WARN node_modules/react-spring/node_modules/react
npm WARN   peer react@">=16.8" from @react-spring/konva@9.0.0
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN     @react-spring/konva@"^9.0.0" from react-spring@9.0.0
npm WARN     node_modules/react-spring
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"16.8.x" from react-konva@16.8.6
npm WARN node_modules/react-spring/node_modules/react-konva
npm WARN   peer react-konva@">=16.8" from @react-spring/konva@9.0.0
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.2
npm WARN node_modules/react-spring/node_modules/react
npm WARN   peer react@">=16.8" …