代码之家 › 专栏 › 技术社区 › Natesh bhat

为什么反作用加载项CSS转换组不在这里工作?

react-transition-group reactjs jquery javascript

Natesh bhat · 技术社区 · 7 年前

import CSSTransitionGroup from 'react-addons-css-transition-group' ; 

class VariableDefinitions extends Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <CSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            <VariableDefine id={id} key={id} {...this.props} />
        </CSSTransitionGroup>
      );
    })
}}

这就是我如何使用过渡组。以下是我的style.css类

.fade-enter{
  opacity: 0;
  height: 0%;
}
.fade-enter-active{
  transition: all 1s ; 
  height: 100%;
  opacity: 1;
}

.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all 1s ;
  opacity: 0;
}

当我通过更改 idToVarStates 数据,我一点动画都没有。这里怎么了?如何解决这个问题?

3 回复 | 直到 7 年前

Root 7 年前

包已被删除。

首先,介绍了NPM包中的react-addons-css转换组。

反应加载项CSS转换组此包中的代码已移动。我们建议您使用来自反应过渡组的csstransitiongroup。

因此,不建议现在使用React Addons CSS Transition Group包,建议使用React Transition Group。

这页可能被压坏了。

第二,object.keys(idtovarstates).map将呈现过多的transitionGroup.

将csstranstation更改为此。

<TransitionGroup className="todo-list">
                {idToVarStates.map(({ id, text }) => (
                    <CSSTransition
                        key={id}
                        timeout={500}
                        classNames="fade"
                    >
                        <VariableDefinition text={text} key={id} filter={this.props.filter} {...this.props}/>
                    </CSSTransition>
                ))}
            </TransitionGroup>

工作代码

我为react-transition-group创建了一个示例。

工作代码在这里: https://codesandbox.io/s/github/stackOverflow166/variable

Bens Steves 7 年前

简单的回答。包已被移动。根据NPM页面 react-addons-css-transition-group .

此包中的代码已移动。我们建议您使用相反,从反应过渡组的csstransitiongroup。

尝试通过运行卸载当前包 npm uninstall react-addons-css-transition-group . 然后安装正确的软件包:

npm i react-transition-group

必要时更改您的导入并包装 CSSTransitionGroup 具有 <TransitionGroup> . 试试看。

您还可以对此进行演练(可在React Transition Group的Github页面上找到) migration guide 帮助你。

希望这有帮助。

-2

Singham 7 年前

我编辑了您的代码,并用我的代码替换,并且完美地处理了我的代码。

import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' ; 

class VariableDefinitions extends React.Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <ReactCSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            {React.cloneElement(this.props.children, {key: page})}
        <ReactCSSTransitionGroup>
      );
    })
}}

这是style.css

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}