React lifecycle animations

Question

Tôi đang cố gắng tìm cách để thực hiện hoạt ảnh tùy thuộc vào vòng đời của ReactElement, thật dễ dàng để làm một hoạt ảnh khi thành phần vừa được gắn kết, nhưng tôi sẽ thực hiện một thao tác khác trước khi ngắt kết nối thành phần.

Tôi thực sự không thể sử dụng ReactCSSTransitionGroup vì điều đó sẽ không sử dụng RequestAnimationFrame.

Chỉ để mô tả một chút trường hợp của tôi, thành phần của tôi là thanh bên, tôi có thể bật/tắt tùy thuộc vào đầu vào của một số người dùng.

var Sidebar = React.createClass({ 
    componentDidMount: function() { 
     var menuUfeWidth = $('.menu-ufe').width(); 
     $(this.getDOMNode()).transition({x: menuUfeWidth}, Utils.animationDuration * 2, 'snap'); 
    }, 
    render: function() { 
     return (
      <div className={'leaflet-sidebar left'}> 
       <div className={'ufe-content'} /> 
      </div> 
     ); 
    } 
}); 

Tôi tự hỏi làm thế nào bạn sẽ làm việc theo cách của bạn để có thể có một hình ảnh động trước khi các thành phần unmount.

Answer 1

ReactCSSTransitionGroup chỉ là một phiên bản đặc biệt của ReactTransitionGroup mà các cuộc gọi componentWillEnter, componentDidEnter, componentWillLeave, và componentDidLeave dựa trên CSS xác định của bạn.

Nếu bạn không muốn sử dụng hình ảnh động CSS, bạn chỉ có thể sử dụng ReactTransitionGroup và sử dụng một thành phần mà thực hiện these lifecycle hooks sử dụng hình ảnh động RAF-based:

<ReactTransitionGroup component="div> 
    <MyCustomReactTransitionComponent key={...} /> 
</ReactTransitionGroup> 

Dưới đây là một ví dụ tôi tìm thấy từ một SO bài: http://jsbin.com/jebumipimo/1/edit?html,console,output