标签: react-spring

我尝试为数组中的新条目设置动画，因为它们react-spring在第一次渲染时工作得很好，但在更新时不会设置动画

这是一个代码沙箱，我在其中以间隔重现了该问题：https : //codesandbox.io/s/01672okvpl

import React from "react";
import ReactDOM from "react-dom";
import { Transition, animated, config } from "react-spring";

import "./styles.css";

class App extends React.Component {
  state = { fake: ["a", "b", "c", "d", "e", "f"] };

  fakeUpdates = () => {
    const [head, ...tail] = this.state.fake.reverse();
    this.setState({ fake: [...tail, head].reverse() });
  };

  componentDidMount() {
    setInterval(this.fakeUpdates, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.fakeUpdates);
  }

  render() {
    const { fake } = this.state;
    return (
      <div className="App">
        {fake.map((entry, index) …

如何使用useSpring（）挂钩？

我正在尝试使用useSpring（）挂钩为transform属性设置动画：

它只是如果初始状态是不工作"translate3d(0,0,0)"，举例来说，如果我初始化这样说，这与toggle是false：

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,0,0)"
});

另一方面，这可以工作：

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,1px,0)"
});

这是错误吗？谢谢

标题可能不准确，但我会尝试在这里解释一下。我一直在模式下使用SwitchTransitionin-out，但由于我的动画主要是使用包中的钩子 useSpring 完成的react-spring，所以我宁愿React Transition Group完全放弃。但我不太确定如何达到同样的效果。当发生转换（对于路由）时，我需要旧组件保持可见（例如 2000 毫秒），而新组件已经可见。useTransition看看中的钩子，react-spring我看不出有什么办法可以为 引入延迟leave。

const transition = useTransition(show, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  config: {
    duration: 200, // duration for the whole animation form start to end
  },
})

里面SwitchTransition会是这样的：

<SwitchTransition mode='in-out'>
  <CSSTransition
    key={location.pathname}
    timeout={{ enter: 2000, exit: 400 }}
    unmountOnExit
    onEnter={()=>{callback}}
  >
    /* here go routes */
  </CSSTransition> …

文档中的拖动示例（例如此示例）速度非常快，并且非常准确地映射到我的手指位置。我尝试一对一复制示例，但与我的手指位置相比有明显的滞后。

这是一个代码沙箱示例，在真实设备上测试时有明显的滞后。

信息：

• React 使用手势版本：（我已经尝试了各种版本组合，但没有影响，但这是codesandbox 中的配置）

    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "react-spring": "9.1.2",
    "react-use-gesture": "9.1.3"

• 设备：iPhone 12 Pro Max
• 操作系统：[例如iOS14.5.1]
• 浏览器镀铬

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0 })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}

我正在尝试将react-spring动画库导入基于react组件类的reactjs应用程序。

似乎新的（截至2019年）React Hooks使集成变得更加混乱。

所以这就是为什么我问如何react-spring在ReactJS应用程序中使用哪些使用类，进而使用React钩子的原因。

无法正常工作的代码如下所示：

import React from 'react';
import { useSpring, animated, interpolate } from 'react-spring'


export default class TestAnimation extends React.Component {

    constructor(props) {
        super(props);

        const { o, xyz, color } = useSpring({
            from: { o: 0, xyz: [0, 0, 0], color: 'red' },
            o: 1,
            xyz: [10, 20, 5],
            color: 'green'
        });

        this.aniText = <animated.div
            style={{
                // If you can, use plain animated values like always, ...
                // You would do that in …

我想要实现一种“盲目效果”，点击按钮将导致覆盖 div 动画化，因此只有一小部分显示在屏幕顶部，并显示下面的 div。

我正在使用 gatsby，带有 React spring 和样式组件。我已将“百叶窗”设置为组件，如下所示：-

const HeroWrapper = styled(animated.div)`
  background-color: blue;
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  z-index: 15;
`
const HeroTitle = styled.h1`
  margin: auto;
  color: whitesmoke;
`

const Hero = () => {
  const [isHeroOpen, setHeroOpen] = useState(true)
  const heroAnimation = useSpring({
    transform: isHeroOpen ? `translate3d(0,0,0)` : `translate3d(0, -85%, 0)`,
  })

  return (
    <HeroWrapper style={heroAnimation} onClick={() => setHeroOpen(!isHeroOpen)}>
      <HeroTitle>I am a Hero Blind</HeroTitle>
      <div …

使用react-spring移动文本动画？

我正在开发一个使用reactjs作为前端的网站，在标题中我想自动从右到左移动一些文本，但我想只用react-spring来制作动画！谁能解决我的问题吗？

由于我是react-spring新手，我找不到这个问题的正确解决方案！

我有我的组件和故事书故事文件，它没有错误地呈现，但它不能拖动。我将我的研究基于react-use-gesture Github 中的这个示例。我注意到，如果我使用 create-react-app 启动一个新项目并将此代码粘贴到那里，它可以正常工作，但是使用 storybook 就行不通了。我还注意到，在我的代码中，元素看起来像而不是（来自有效示例的代码），我一直在研究，但找不到解决方案，所以我来寻求这个很棒的社区的帮助。<div style="x: 0px; y: 0px;"></div><div style="transform: none;"></div>

目标：在反应故事书上有一个可拖动的卡片组件故事，使用react-spring和react-use-gesture。

预期结果：能够拖动组件。

实际结果：组件不可拖动

错误消息：无。

组件的代码：

import React from 'react'
import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

export function Card() {
  const [props,
    set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down …

react-spring 过渡页面上显示的第一个示例是错误的，代码与显示的动画不对应。

我怎样才能达到同样的效果？，我怎样才能在每个组件的输入和使用弹簧缓动之间获得延迟？。

当我尝试此操作时，所有组件都同时输入。

使用过渡示例

我认为react-springuseSpring()会导致组件重新渲染很多，所以如果它是一个已经有大量CPU密集工作要做的组件，那么react-spring并不是最适合该任务的。

我可以看到它重新渲染了很多，在他们的例子中：

https://codesandbox.io/s/musing-dew-9tfi9?file=/src/App.tsx

（通过查看 console.log 输出，其中有很多打印输出renderCount。当我们将持续时间更改为 5 秒时，打印输出会更多5000）。

同样，如果它是一个类似于react-spring的组件，它会渲染很多：

https://codesandbox.io/s/wonderful-currying-9pheq

然而，下面的代码：

let renderCount = 0

export default function App() {
  const styles = useSpring({
    loop: true,
    to: [
      { opacity: 1, color: '#ffaaee' },
      { opacity: 0.5, color: 'rgb(14,26,19)' },
      { transform: 'translateX(100px)' },
      { transform: 'translateX(0px)' },
    ],
    from: { opacity: 0, color: 'red', transform: 'translateX(0px)' },
    config: { duration: 500 },
  })

  console.log('renderCount', ++renderCount)

  return <a.div style={styles}>I will fade in and out</a.div> …

您可以在这里找到该库： https: //www.react-spring.io/

    import React from "react";
    import ReactDOM from "react-dom";
    import Typography from "@material-ui/core/Typography";
    import { useSpring, animated } from "react-spring";
    
    function App() {
      const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
      });
      return (
        <div className="App">
          <Typography variant="h2">
            <animated.div style={props}>Example</animated.div>
          </Typography>
    
          {/* UNCOMMENT THE LINE BELOW AND SEE */}
       {/* <animated.Typography variant="h2">Example</animated.Typography> */}
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

**I would love if I could do something like:**

 `<animated.Typography style={`props`}>Example </animated.Typography>` …

我有一个 React 应用程序。我正在使用 React Spring 来制作整体动画。我无法为两件事制作动画 - 我正在试验的动画是一个简单的不透明动画。

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

              /***
              Some code
              ***/

              const styleProps = useSpring({
                 to: { opacity: 1 },
                 from: { opacity: 0 }
              });

1) 是条件元素。请参考以下代码 -

              <section>
                {!flag ? (
                <animated.div style={styleProps}>
                  Some random text
                </animated.div>
              ) : (
                <animated.div style={styleProps}>
                  To appear with animation
                </animated.div>
              )
             }
             </section>

问题是react-spring 的animated.div 的动画不一样。什么是正确的方法？有没有办法在没有反应弹簧的情况下制作相同的动画？

2）我有一个基于标志的条件引导类名。我想制作相同的动画

            <animated.div style={styleProps} className={classnames({
                 "col-lg-6": !flag,
                 "col-lg-12": flag
            })}
            >
                Random Content
            </animated.div>

对于这一点，问题在于它没有动画。什么是正确的方法？

我正在使用 React-Spring useTransition 并收到错误：

TypeError: Cannot read property 'text' of undefined

import React, { useState } from 'react'
import { useSpring, useTransition, animated } from 'react-spring'


function MyApp() {

  const [items, setItems] = useState([
    { id: 1, text: 'Item1' }, { id: 2, text: 'Item2' }
  ]);


  const transition = useTransition(items, item => item.id, {
    from: { opacity: 0, marginLeft: -100, marginRight: 100 },
    enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
  })

  return (
    <>
      <div>
        {transition.map(({ item, …