Question

我想在不使用jQuery或其他类似库的情况下为组件内的一些元素设置动画。我运行了以下代码：

export default React.createClass({
    getInitialState() {
        return {
            women: {
                total: this.props.women.upvotes + this.props.women.downvotes,
                up_height: {
                    'height': 0
                },
                down_height: {
                    'height': 0
                }
            }
        };
    },

    componentDidMount: function() {
        this.setState({
            women: {
                up_height: {
                    'height': (this.props.women.upvotes / this.state.women.total) * 100 + '%'
                },
                down_height: {
                    'height': (this.props.women.downvotes / this.state.women.total) * 100 + '%'
                }
            }
        })
    },

    render() {
        return (
            <li className="block-element">
                <div className="upvotes">
                    <span className="women" style={this.state.women.up_height}>{this.props.women.upvotes}</span>
                    <span className="men">{this.props.men.upvotes}</span>
                </div>
            </li>
        )
    }
})

所以在getInitialState上，样式高度设置为0.当de componentDidMount设置为它应该的高度时。我确实通过CSS向元素添加了transition，但似乎没有发生任何事情。

我尝试在setTimeout的{{1}}附近添加setState，但这打破了componentDidMount。抬头？如何使这项工作？

Answer 1

另一种可能是使用requestAnimationFrame中使用的npm install react react-dom http://github.com/pleasetrythisathome/react.animate/tarball/master。

如果您不介意专门为React使用实现此功能的库，react.animate（不要与react-animate混淆）就可以了。 npm的当前版本（日期：9.4.16）似乎不支持CommonJS，但github上的版本更新。举个例子：

React = require('react')
ReactDOM = require('react-dom')
require('@pleasetrythisathome/react.animate')

SomeComponent = React.createClass({
  mixins: [React.Animate],
  getInitialState: function () {return {bananas: 0}},
  componentDidMount: function () {
    this.animate({bananas: 100}, 1000, () => {console.log('Finish')})
  },
  render: function () {return React.DOM.span({}, this.state.bananas)},
})

ReactDOM.render(React.createElement(SomeComponent), document.getElementById('apple'))

test.js：

browserify test.js > apple.js

然后，例如使用browserify

<div id="apple"></div>
<script src="apple.js"></script>

test.html：

`@foreach(App\Menu::get() as $menuItem)
  @if( ! $menuItem->submenu->isEmpty() )
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        {{ $menuItem->menu_name }}
    </a>
  @else
    <li>
    <a href="{{ $menuItem->url }}">{{ $menuItem->menu_name }}</a>
  @endif

  @if( ! $menuItem->submenu->isEmpty())
      <ul class="dropdown-menu" role="menu">
          @foreach($menuItem->submenu as $subMenuItem)
              <li><a href="{{ $subMenuItem->link }}">{{ $subMenuItem->submenu_name }}</a></li>
          @endforeach
      </ul>
  @endif
  </li>
@endforeach`

的jsfiddle：

https://jsfiddle.net/jo5tp5mt/

在组件中反映动画元素

1 个答案: