gpt4 book ai didi

javascript - ReactCSSTransitionGroup 不起作用

转载 作者:行者123 更新时间:2023-11-30 00:07:19 38 4
gpt4 key购买 nike

我在使用 ReactCSSTransitionGroup 时遇到了一些问题。当用户单击页面上的按钮时,我想显示某种带有一些精美动画的模态形式。这是代码:

import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';

export default class AppTop extends React.Component {
constructor(props) {
super(props);
this.state = { openConfig: false };
}
toggleConfig() {
this.setState({ openConfig: !this.state.openConfig });
}
render() {
// only shows up openConfig is true
const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';

return (
<div>
... //some elements
<button onClick={this.toggleConfig.bind(this)}>Config</button>
{ domAppConfig }
</div>
);
}
}

这是 AppTop 组件。你可以看到 render 里面的按钮组件,点击这个,openConfig 状态会切换。现在这是 AppConfig 组件:

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class AppConfig extends React.Component {
render() {
return (
<ReactCSSTransitionGroup
transitionName="anim-app-config"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<div id="app-config">
<h1>App Config</h1>
<p>Helloworld!</p>
</div>
</ReactCSSTransitionGroup>
);
}
}

组件很简单,就是打印一些文字。这是“.anim-app-config”的样式:

.anim-app-config-enter {
opacity: .1;
}
.anim-app-config-enter.anim-app-config-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.anim-app-config-leave {
opacity: 1;
}
.anim-app-config-leave.anim-app-config-leave-active {
opacity: .1;
transition: opacity 300ms ease-in;
}

当我运行这个应用程序时,动画不工作。只是组件立即显示和隐藏,没有动画。我对此进行了搜索,并尝试将 key 添加到 AppConfig 组件中,但没有成功。再包装一个 div 也没有用。添加 transitionAppear={true} 对我也不起作用。

我使用 ReactCSSTransitionGroup 组件错了吗?还是我错过了什么?在 React 上添加动画对我来说很难,所以请给我一些建议。谢谢。

最佳答案

你应该在你的 Apptop 中有 ReactCSSTransitionGroup 因为它会渲染或不渲染的点。在 AppConfig 中制作它不会有任何动画,因为它将把它呈现为一个直接组件。

import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';

export default class AppTop extends React.Component {
constructor(props) {
super(props);
this.state = { openConfig: false };
}
toggleConfig() {
this.setState({ openConfig: !this.state.openConfig });
}
render() {
// only shows up openConfig is true
const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';

return (
<div>
... //some elements
<button onClick={this.toggleConfig.bind(this)}>Config</button>
<ReactCSSTransitionGroup
transitionName="anim-app-config"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{domAppconfig}
</ReactCSSTransitionGroup>
</div>
);
}
}

关于javascript - ReactCSSTransitionGroup 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38028951/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com