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

Question

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

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

这就是我问上述问题的原因。下面是一个尝试使用无状态组件的反应姿势示例。我希望当我将其添加到我的主.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 的动画，因为它挂载的不透明度设置为"进入">，即不透明度 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之间切换，这在第一次渲染(挂载组件)上为假，然后在组件挂载钩子时设置为true。

很抱歉冗长的解释，但对我来说完全理解很重要。 这个额外的样板是拥有简单div 动画的唯一解决方案吗？ 第一个包装组件，其生命周期挂钩为 componentDidMount，以使用状态触发第二个渲染。 我认为她正在发生的事情对我和其他人来说

都是崩溃的：

1. 初始渲染姿势={this.state.isEnter ？"输入"："之前"} 已设置 到"之前"，这意味着 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将在安装时制作动画。

这是一个代码沙盒示例：

https://codesandbox.io/s/n5y2v17rwl

Answer 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 行额外的代码。