Cách sử dụng React TransitionMotion willEnter()

Question

Sử dụng React Motion's TransitionMotion, tôi muốn tạo hiệu ứng động 1 hoặc nhiều hộp vào và ra. Khi một hộp vào khung nhìn, chiều rộng và chiều cao của nó phải từ 0 pixel đến 200 pixel và độ mờ của nó sẽ đi từ 0 đến 1. Khi hộp rời khỏi khung nhìn, ngược lại sẽ xảy ra (width/height = 0, opacity = 0)

Tôi đã cố gắng giải quyết vấn đề này tại đây http://codepen.io/danijel/pen/RaboxO nhưng mã của tôi không thể chuyển đổi hộp một cách chính xác. Kiểu của hộp nhảy ngay lập tức đến chiều rộng/chiều cao 200 pixel thay vì chuyển đổi.

Điều gì sai với mã?

let Motion = ReactMotion.Motion 
let TransitionMotion = ReactMotion.TransitionMotion 
let spring = ReactMotion.spring 
let presets = ReactMotion.presets 

const Demo = React.createClass({ 
    getInitialState() { 
    return { 
     items: [] 
    } 
    }, 
    componentDidMount() { 

    let ctr = 0 

    setInterval(() => { 
     ctr++ 
     console.log(ctr) 
     if (ctr % 2 == 0) { 
     this.setState({ 
      items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in 
     }); 
     } else { 
     this.setState({ 
      items: [], // fade box out 
     }); 
     } 

    }, 1000) 
    }, 
    willLeave() { 
    // triggered when c's gone. Keeping c until its width/height reach 0. 
    return {width: spring(0), height: spring(0), opacity: spring(0)}; 
    }, 

    willEnter() { 
    return {width: 0, height: 0, opacity: 1}; 
    }, 

    render() { 
    return (
     <TransitionMotion 
     willEnter={this.willEnter} 
     willLeave={this.willLeave} 
     defaultStyles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: 0, 
      height: 0, 
      opacity: 0 
      }, 
     }))} 
     styles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: item.width, 
      height: item.height, 
      opacity: item.opacity 
      }, 
     }))} 
     > 
     {interpolatedStyles => 
      <div> 
      {interpolatedStyles.map(config => { 
       return <div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}> 
       <div className="label">{config.style.width}</div> 
       </div> 
      })} 
      </div> 
     } 
     </TransitionMotion> 
    ); 
    }, 
}); 

ReactDOM.render(<Demo />, document.getElementById('app')); 

Answer 1

Theo documentation của styles dưới phần TransitionMotion (và tôi không tuyên bố đã hiểu tất cả của nó hoàn toàn :)):

phong cách: ... một mảng của TransitionStyle ...

Điều quan trọng cần lưu ý ở đây là có 2 kiểu kiểu đối tượng là thư viện này giao dịch với (hoặc ít nhất là TransitionMotion một phần của nó) và nó gọi cho họ TransitionStyle và TransitionPlainStyle.

Giá trị trước đó được chuyển vào thuộc tính styles là TransitionPlainStyle. Thay đổi chúng thành TransitionStylekỳ diệu bắt đầu tạo hoạt ảnh theo thứ tự Enter.

Bạn có thể đọc thêm về 2 loại khác nhau được đề cập ở trên trên here.

styles={this.state.items.map(item => ({ 
    key: item.key, 
    style: { 
    width: spring(item.width), 
    height: spring(item.height), 
    opacity: spring(item.opacity) 
    } 
}))} 

Forked codepen demo.

Một lần nữa, tôi chưa hiểu đầy đủ về hoạt động bên trong của nó. Tôi chỉ biết rằng styles của bạn phải được thay đổi theo cách trên để làm cho nó hoạt động.

Tôi sẽ rất vui nếu ai đó cũng có thể hướng dẫn tôi về vấn đề này.

Hy vọng điều này sẽ hữu ích.