时间戳

首页 > 解决方案 > 组件不使用 react-transition-group 进行动画处理，只是立即更新？

javascript - 组件不使用 react-transition-group 进行动画处理，只是立即更新？

问题描述

我正在尝试在此页面的第一部分之后为侧边栏组件设置动画。当我按照此操作时，组件不会设置动画，而只是安装/卸载。

组件SidePage如下：

import React from "react"
import { TransitionGroup, CSSTransition } from "react-transition-group"
import "./sidePage.css"

class SidePage extends React.Component {
  componentWillMount() {
    console.log("will mount")
  }
  componentDidMount() {
    console.log("did mount")
  }
  componentWillUnmount() {
    console.log("will unmount")
  }
  render() {
    const { content, sidePageOpen } = this.props
    return (
      <TransitionGroup component={null}>
        {sidePageOpen && (
          <CSSTransition key={content.id} classNames="sidepage" timeout={2000}>
            <div
              key={content.id}
              className="sidepage"
              dangerouslySetInnerHTML={{ __html: content.html }}
            />
          </CSSTransition>
        )}
      </TransitionGroup>
    )
  }
}

export default SidePage

和css文件：

.sidepage-enter {
  opacity: 0;
}
.sidepage-enter-active {
  opacity: 1;
  transition: all 2s;
}
.sidepage-exit {
  opacity: 1;
}
.sidepage-exit-active {
  opacity: 0;
  transition: all 2s;
}

.sidepage {
  background: white;
  padding: 10px;
  height: 100%;
  width: 90vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.4;
  transition: all 0.6s;
}

我认为基本的东西——这sidePageOpen是一个传递下来的布尔状态，我在另一个页面上有一个按钮来切换这个状态。如果有人有任何想法/建议会非常出色和感激。

标签： javascriptreactjsgatsby

解决方案

最终找到了解决方案——我<Wrapper>用emotion.sh风格的组件创建了一个风格的div，我用它来包含我所有的内容，不知道为什么，但这不允许任何动画——把它改成一个简单的<div>似乎可以解决它.

编辑：可能是因为它在每次状态更改时重新创建 Wrapper 组件。

推荐阅读