Question

我有一个问题，动画页面的动画一或零项 - http://facebook.github.io/react/docs/animation.html#animating-one-or-zero-items

我的组件最初显示一条消息。然后当它获得下一条消息时，它会在1秒内淡出“离开”元素。因为我也将transitionLeaveTimeout设置为1秒，所以在淡出完成后会删除此元素。

但是，我将transitionEnterTimeout设置为1秒（然后我尝试了2秒），然而，“进入”元素在“离开”开始时立即作为第一个孩子插入。为什么transitionEnterTimeout之后没有插入“进入”元素？有没有办法让这种情况发生？

我问的原因是因为如果两者都存在，那么“离开”元素会被行高调低。我不能做像-100％行高等CSS技巧，因为CSS有点复杂。

以下是显示此问题的复制粘贴示例：

<html>
    <head>
        <script src="https://fb.me/react-with-addons-0.14.4.js"></script>
        <script src="https://fb.me/react-dom-0.14.4.js"></script>
        <script>

            var MyStore = {};

            function init() {               
                var TheThing = React.createClass({
                    displayName: 'TheThing',
                    getInitialState: function() {
                        return {
                            msg: this.props.msg
                        };
                    },
                    componentDidMount: function() {
                            MyStore.setState = this.setState.bind(this);
                    },
                    render: function() {
                        return React.createElement(React.addons.CSSTransitionGroup, {transitionName:'thing', transitionEnterTimeout:6000, transitionLeaveTimeout:3000},
                            React.createElement('div', {key:this.state.msg},
                                this.state.msg
                            )
                        );
                    }
                });

                ReactDOM.render(React.createElement(TheThing, {msg:'initial'}), document.getElementById('message'));

                setTimeout(function() {
                    MyStore.setState({msg:'hi'})
                }, 6000)

                setTimeout(function() {
                    MyStore.setState({msg:'bye'})
                }, 12000)
            }
            window.addEventListener('DOMContentLoaded', init, false);
        </script>
        <style>
            .thing-enter,
            .thing-appear {
              opacity: 0;
            }

            .thing-enter.thing-enter-active,
            .thing-appear.thing-appear-active {
              opacity: 1;
              transition: opacity 6s ease 3s;
            }

            .thing-leave {
              opacity: 1;
            }

            .thing-leave.thing-leave-active {
              opacity: 0;
              transition: opacity 3s ease;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="message"></div>
        </div>
    </body>
</html>

在transitionLeaveTimeout之后删除了元素 - 但是如何在transitionEnterTimeout之后插入

0 个答案: