Reactjs ReactCSTranssitionGroup进入动画不工作,退出工作正常
我正在创建一个可重用的模型,所有的东西都在工作,但是当我实际调用组件时,enter转换不起作用。退出工作完美。我得到一个错误: warning.js:45警告:失败的propType:transitionLeaveTimeout不是 提供给ReactCSTranssitionGroup:这可能导致不可靠 React的未来版本不支持动画和动画。请检查 模态的渲染方法 我已经按照指示提供了进入和离开超时,但仍然没有运气Reactjs ReactCSTranssitionGroup进入动画不工作,退出工作正常,reactjs,animation,modal-dialog,reactcsstransitiongroup,Reactjs,Animation,Modal Dialog,Reactcsstransitiongroup,我正在创建一个可重用的模型,所有的东西都在工作,但是当我实际调用组件时,enter转换不起作用。退出工作完美。我得到一个错误: warning.js:45警告:失败的propType:transitionLeaveTimeout不是 提供给ReactCSTranssitionGroup:这可能导致不可靠 React的未来版本不支持动画和动画。请检查 模态的渲染方法 我已经按照指示提供了进入和离开超时,但仍然没有运气 import React from 'react'; import { rend
import React from 'react';
import { render } from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import '../../modal.css';
const Modal = React.createClass({
render(){
if(this.props.isOpen){
return (
<ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={400} transitionLeaveTimeout={400}>
<div className="ui-modal" key={this.props.transitionName} {...this.props}>
{this.props.children}
</div>
</ReactCSSTransitionGroup>
);
} else {
return <ReactCSSTransitionGroup transitionName={this.props.transitionName} />;
}
}
});
const UiModal = React.createClass({
getInitialState(){
return { isModalOpen: false };
},
openModal() {
this.setState({ isModalOpen: true });
},
closeModal() {
this.setState({ isModalOpen: false });
},
setModalSize() {
this.setState({ isModalLarge: false });
},
render() {
const { openBtnText, header, subHeader, body, footer, optionalFooterText, closeBtnText, size } = this.props;
const modalSize = size === 'large' ? 'ui-modal-large' : 'ui-modal-small';
return (
<div className="ui-modal-trigger-container">
<h1>Modal small enter from bottom</h1>
<div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
<Modal isOpen={this.state.isModalOpen} transitionName="modal-anim" id={modalSize}>
<h1 className="ui-modal-header">{header}</h1>
<div className="ui-modal-subheader">{subHeader}</div>
<div className="ui-modal-body">
{body}
</div>
<div className="ui-modal-footer">
<div className="ui-modal-footer-button-group">
<div className="ui-modal-footer-button button" onClick={this.closeModal}>{closeBtnText}</div>
<div className="ui-modal-optional-footer-text" onClick={this.closeModal}>{optionalFooterText}</div>
</div>
</div>
</Modal>
</div>
);
}
});
export default UiModal;
您仍然会收到与您发布的相同的错误?你能发布你的css和transitionName吗?你仍然会收到你发布的相同错误吗?你能发布你的css和transitionName吗?
.ui-modal-trigger-container {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 0;
margin-top: 300px;
}
.ui-modal {
width: 450px;
margin: 0 auto;
top: 70%;
left: 35%;
padding: 20px;
background-color: green;
position: absolute;
z-index: 1;
border: 1px solid grey;
box-shadow: 0 0 5px 2px #fff;
background: white;
}
#ui-modal-small {
width: 450px;
margin: 0 auto;
top: 70%;
left: 35%;
padding: 20px;
background-color: green;
position: absolute;
z-index: 1;
border: 1px solid grey;
box-shadow: 0 0 5px 2px #fff;
background: white;
}
#ui-modal-large {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 8%;
left:0%;
border: 1px solid #ccc;
background: white;
}
.ui-modal-header {
font-family: 'Flexo';
font-size: 28px;
border-bottom: 2px solid black;
width: 90%;
margin: 0 auto;
}
.ui-modal-subheader {
font-family: 'Flexo';
font-size: 13px;
width: 90%;
margin: 0 auto;
}
.ui-modal-body {
margin: 0 auto;
width: 90%;
padding: 10px;
}
.ui-modal-footer {
border-top: 2px solid black;
margin: 0 auto;
width: 90%;
}
.ui-modal-footer-button-group {
padding-top: 10px;
}
.ui-modal-footer-button {
float: right;
}
.ui-modal-optional-footer-text {
float: left;
color: #4099D4;
font-style: italic;
}
.modal-anim-enter {
opacity: 0.00;
transform: translateY(100%);
transition: all .5s;
}
.modal-anim-enter.modal-anim-enter-active {
opacity: 1;
transform: scale(1);
transition: all .5s;
}
.modal-anim-leave {
opacity: 1;
transform: translateY(100%);
transition: all .5s;
}
.modal-anim-leave.modal-anim-leave-active {
opacity: 0.00;
transform: translateY(100%);
}