无状态 React 组件上的单个动画答案

【问题标题】：Single animation on stateless React component无状态 React 组件上的单个动画
【发布时间】：2018-10-17 10:40:32
【问题描述】：

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

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

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

首先安装 FadeDiv 组件，并将 initialPose 设置为不透明度 0

然后在设置为不透明度的渲染上设置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 因为它安装时的不透明度设置为 "enter"，即不透明度 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 的生命周期钩子包装组件，以使用状态触发第二次渲染。我认为她发生的事情让我和其他人可能理解的崩溃是：

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

这是一个正确的假设吗？

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

【问题讨论】：

如果他们在 React 中使用过 react-pose 或任何动画，有没有人可以证实我的发现？？
您可以使用PoseGroup 创建进入/退出过渡。

标签： reactjs animation popmotion

【解决方案1】：

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

你应该检查一下。

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

对于闭合的初始姿势，Box 将在安装时进行动画处理。

这是一个 Codesandbox 示例：

https://codesandbox.io/s/n5y2v17rwl

【讨论】：

【解决方案2】：

我一直在使用 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 行额外的代码。

【讨论】：