javascript - 具有动态样式的 ReactCSSTransitionsGroup 无法在第一项以外的任何内容上正确执行输入动画

Question

尝试为启动对话框构建漂亮的动画，但遇到 ReactCSSTransitionsGroup 的障碍。目标是确保对话框看起来像缩小启动它的按钮。下面是一个显示工作演示的示例。

数学看起来不错，CSS 看起来不错，组件看起来不错。表现出的意外行为如下

1. 点击第一个按钮(任意一个)。完美运行。
2. 点击第二个按钮，进入动画不播放。
3. 无论添加多少个按钮，只有第一个按预期工作。所有其他按钮都不会正确显示输入动画。
4. 离开动画适用于所有按钮。

试图找出代码是否有问题，ReactCSSTransitionsGroup 的意外使用或它的错误。

Fiddle is here

谢谢!

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
let StyleSheet = aphrodite.StyleSheet;
let css = aphrodite.css


const Button = (props) => {
    return <div className="button" onClick={(e) => props.onClick(e)}>Click me</div>;
}



let emptyStyleSheet = StyleSheet.create({
	enter: {},
    enterActive: {},
    leave: {},
    leaveActive: {}
});


class UnicornDialog extends React.Component {

	constructor(props) {
    	super(props);
		this.state = {sheet: emptyStyleSheet};
    }

	componentWillReceiveProps(nextProps, nextContext){
        if (!nextProps.show) {
            return;
        }

        let viewportRect = document.body.getBoundingClientRect();
        let sourceRect = nextProps.startRect;
        
        let viewportCenterX = viewportRect.left + (viewportRect.width / 2);
        let viewportCenterY = viewportRect.top + (viewportRect.height / 2);

        let sourceCenterX = sourceRect.left + (sourceRect.width / 2);
        let sourceCenterY = sourceRect.top + (sourceRect.height / 2);

        let dx = sourceCenterX - viewportCenterX;
        let dy = sourceCenterY - viewportCenterY;
        
        let sheet = StyleSheet.create({
            enter: { 
            	opacity: 0, 
                transform: `translate(${dx}px, ${dy}px) scale(0.01)` 
            },
            enterActive: { 
            	opacity: 1, 
                transform: "translate(0, 0) scale(1)", transition: "transform 750ms cubic-bezier(0, 0, 0.2, 1), opacity 750ms cubic-bezier(0, 0, 0.2, 1)" 
            },
            leave: {
            	opacity: 1, 
                transform: "translate(0, 0) scale(1)"
            },
            leaveActive: { 
            	opacity: 0, 
                transform: `translate(${dx}px, ${dy}px) scale(0.01)`, 
                transition: "transform 750ms cubic-bezier(0, 0, 0.2, 1), opacity 750ms cubic-bezier(0, 0, 0.2, 1)" 
            }
        })

        this.setState(sheet);
    }

    render() {
        let child = <div key={"dialog"}
            className="dialog"
            onClick={this.props.onClick}>click anywhere to dismiss</div>;

		if (!this.props.show) {
            child = null;
        }

        return <ReactCSSTransitionGroup
			transitionName={{
              enter: css(this.state.enter),
                enterActive: css(this.state.enterActive),
                leave: css(this.state.leave),
                leaveActive: css(this.state.leaveActive)
            }}
            transitionEnterTimeout={750}
            transitionLeaveTimeout={750}>
            {child}
        </ReactCSSTransitionGroup>
    }
}





class Parent extends React.Component {

    constructor(props) {
        super(props);
        this.state = { startRect: null, show: false };
    }

    showDialog(e) {
        let startRect = e.target.getBoundingClientRect();
        let show = true;
        this.setState({ startRect, show });
    }

    hideDialog() {
        this.setState({ startRect: null, show: false });
    }


    render() {
        return (
            <div>
                <Button onClick={this.showDialog.bind(this)} />
                <Button onClick={this.showDialog.bind(this)} />
                <UnicornDialog {...this.state} onClick={this.hideDialog.bind(this)} />
            </div>
        );
    }
}




ReactDOM.render(< Parent />, document.getElementById('container'));

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.button {
    position: absolute;
    height: 32px;
    line-height: 32px;
    width: 128px;
    text-align: center;
    border: 1px solid rgba(64, 64, 64, 0.1);
    background-color: #e74c3c;
    color: white;
    cursor: pointer;
}

.button:first-child {
    top: 64px;
    left: 64px;
}

.button:nth-child(2) {
    top: 264px;
    left: 264px;
}

.dialog {
    box-sizing: border-box;
    padding: 150px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #34495e;
    color: #ecf0f1;
    cursor: pointer;
    font-size: 2rem;
}

<script src="https://npmcdn.com/react@15.4.0/dist/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/aphrodite@1.1.0/dist/aphrodite.umd.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

解决了这一问题 - 它是样式中的错误。 ReactCSSTransitionGroup 将应用 enter 和 enterActive。应用这些时，有效地应用了 enter 样式但不是事件样式。