小编Pio*_*iak的帖子

velocity-react - 在组件更新后动画化scrollTop

我正在写一个简单的"控制台",以聊天方式显示消息.消息从底部出现,然后向上移动.

我有工作代码,但是每次添加新的"li"时,我都想通过将容器滚动到底部来设置显示消息的动画.

当前代码:

import React from 'react';
import { render, findDOMNode } from 'react-dom';


export default React.createClass({
    componentDidUpdate : function(){
        var node = findDOMNode(this);
        node.scrollTop = node.scrollHeight;
    },
    render() {
        return (
            <ul id="log">
            {
                this.props.messages.map(function(message, index){
                    return <li key={index}>[{message.time.format('HH:mm:ss')}] {message.action}</li>
                })
            }
            </ul>
        )   
    }
})
Run Code Online (Sandbox Code Playgroud)

messages道具来自父组件和商店.

我发现这个速度插件:https://github.com/twitter-fabric/velocity-react我无法弄清楚如何在我的情况下使用它.所有的例子似乎都不适用(或者我只是不理解它们).

我很反应,一些概念仍然让我困惑,所以请理解.

我不想使用jQuery.

javascript animation reactjs velocity.js

9
推荐指数
1
解决办法
2335
查看次数

标签 统计

animation ×1

javascript ×1

reactjs ×1

velocity.js ×1