reactjs - 无状态 React 组件上的单个动画

Question

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

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

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

1. 首先安装 FadeDiv 组件，并将初始姿势设置为不透明度 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，因为它安装时不透明度设置为“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 之间切换，isEnter 在第一次渲染(挂载组件)时为 false，然后在组件挂载钩子(Hook)时设置为 true。

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

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

这是一个正确的假设吗？

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

Answer 1

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

你应该检查一下。

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

在初始姿势闭合的情况下，Box 将在安装时产生动画效果。

这是一个 Codesandbox 示例:

https://codesandbox.io/s/n5y2v17rwl