Question

我正在尝试对this page的第一部分进行动画处理。当我遵循此步骤时，该组件不会进行动画处理，而只是挂载/卸载。

组件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是一个布尔状态，向下传递，我在另一页上有一个按钮可以切换该状态。如果任何人有任何出色的想法/建议，就会受到赞赏。

Answer 1

从sidepage类中删除opacity属性。

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

元素的get添加了不透明度为0.4的一类边页，这就是打破动画的原因。工作演示azure-functions/base:2.0

Answer 2

最终找到了解决方案-我有一个使用{motion.sh}样式的组件创建的样式<Wrapper> div，我使用它来包含我所有的内容，不确定为什么但是不允许任何动画-改变了这可以解决一个简单的<div>问题。

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

组件不使用react-transition-group设置动画，只是立即更新？

2 个答案: