4

我已经开始使用 react-pose 并且有一个关于 React 中大多数动画设置的问题。

  1. 似乎您无法在第一次渲染时触发组件上的动画？

这就是我问上述问题的原因。下面是一个尝试使用无状态组件的 react-pose 示例。我希望当我像这样将它添加到我的 main.js 渲染中时。它会

  1. 首先挂载 FadeDiv 组件，并将 initialPose 设置为不透明度为 0

  2. 然后在设置为不透明度的渲染上设置pose="enter"：1。但事实并非如此。现在，如果是这样的话，那就太好了。

    import React from 'react';
import posed from 'react-pose';

const FadeDiv = posed.div({
  enter: { opacity: 1 },
  before: { opacity: 0 },
  initialPose: 'before'
});

export const Wrapper = () => (
 <FadeDiv pose="enter">
   <div>This is a fading div</div>
 </FadeDiv>
);

如果我错了，请纠正我，但这是我相信正在发生的事情。当 React 安装无状态或任何组件时，它不知道 initialPose 直到它在这个阶段完全安装它为时已晚，它只是将组件的不透明度设置为pose="enter" 这就是为什么我没有看到从 0 开始的动画- 1 因为它安装了不透明度设置为“进入”，即不透明度 1。所以它只是出现而没有任何动画。

好的，如果上面的内容是正确的，那么我在下面添加了这个设置，这是添加状态的额外样板，但我想对于 React 是必要的。

import React, { Component } from 'react';
import posed from 'react-pose';

const FadeDiv = posed.div({
  enter: { opacity: 1 },
  before: { opacity: 0 },
  initialPose: 'before'
});

class Wrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEnter: false
    };
  }

  componentDidMount() {
    this.setState({
      isEnter: true
    });
  }

  render() {
    return (
      <FadeDiv pose={this.state.isEnter ? 'enter' : 'before'}>
        <div>This is a fading div</div>
      </FadeDiv>
    );
  }
}

export default Wrapper;

现在一切正常，但我必须强制第二次渲染在 isEnter 之间切换，这在第一次渲染（挂载组件）时为假，然后在组件挂载钩子时设置为真。

对不起，冗长的解释，但对我来说完全理解很重要。这种额外的样板是拥有简单 div 动画的唯一解决方案吗？首先使用 componentDidMount 的生命周期钩子包装组件，以使用状态触发第二次渲染。我认为她发生的事情让我和其他人可能理解的崩溃是：

  1. 初始渲染姿势={this.state.isEnter ? 'enter' : 'before'} 设置为 "before" 这意味着 FadeDiv 组件的不透明度为 0
  2. 然后第二个渲染被状态更改触发以设置pose="enter"，它将不透明度设置为1并将组件从0 - 1设置为动画。

这是一个正确的假设吗？

考虑到这一点，每当您需要一个简单的动画时，人们就可以通过额外的样板来真正绕过 React 中的动画。是的，我知道您可以使用 css，但您仍然需要等待组件安装以将第一个样式设置为 opacity=0，然后重新渲染以设置 opacity=1。但这里的问题是关于 Popmotion 的 React-pose，我猜使用 DOM 元素动画时 React 本身及其缺陷。

4

2 回答 2

1

https://github.com/Popmotion/popmotion/issues/361#issuecomment-395037669

你应该检查一下。

<Box
  style={styles}
  initialPose="closed"
  pose="open"
/>

使用封闭的初始姿势，Box将在安装时设置动画。

这是一个 Codesandbox 示例：

https://codesandbox.io/s/n5y2v17rwl

于 2018-12-06T12:49:03.583 回答
-1

我一直在使用 react-spring，查看文档，它与 react-pose 非常相似。

您缺少的一件重要的事情是过渡属性，它与不透明度属性配合得很好。

我没有像您那样创建功能组件，而是通过直接更改不透明度来处理动画。

class App extends Component {
  constructor() {
    super()
    this.state ={
      opacity: 0
    }
  }
 componentDidMount() {
   this.handleTransition()
 }

 handleTransition = () => (
   setTimeout(() => this.setState({opacity: 1}), 400 )
 )

 render() {
  return (
    <div className="App">
      <div style={{opacity: this.state.opacity, transition: "opacity 3s ease"}}>
      <h1>Faded Div </h1>
      </div>
    </div>
  );
 }
}

https://codesandbox.io/s/6v6l7xo4zz

目前我发现在状态中设置不透明度是处理转换的唯一方法之一。没有那么糟糕，它只有 2-3 行额外的代码。

于 2018-08-14T23:03:10.653 回答