각 div에 개별적으로 애니메이션을 적용하는 방법

Question

백엔드에서 반환하는 항목 목록이 있습니다. 각 항목은 div을 통해 일종의 타일을 형성하며, 렌더링 된 순간부터 처음으로 애니메이션을 적용하고 싶습니다. 문제는 항목이 모두 함께 반환되며 렌더링 기능이 모두 함께 렌더링된다는 것입니다. 따라서 CSS 애니메이션은 모든 타일에서 동시에 볼 수 있지만 원하는 것은 모든 타일에 "임의"의 튀는 효과를 적용하는 것입니다. 각 타일은 2 초 이내에 나타나야하지만 무작위로 표시해야합니다.

그럴 수 있습니까?

Answer 1

class AnimateItemComponent extends React.Component 
{ 
    static propTypes = 
    { 
     animate: React.PropTypes.bool 
    }; 

    render() 
    { 
     let aniamte = this.props.aniamte; 
     let style = {}; 
     let className = ["item-class"]; 
     let time = parseInt(Math.random() * 2000); // Maximum of 2 seconds 

     if (aniamte) 
     { 
      // Consider support more prefixes 
      style.animationDelay = time + "ms"; 
     } 

     if (this.props.active) 
      className.push("animate"); // Class the activate the animation 

     return React.createElement("div", {className, style}, "My text"); 
    } 
} 

class AnimateComponent extends React.Component 
{ 
    constructor() 
    { 
     this.state = {}; 

     // Initialize the value to keep the prop types boolean 
     this.state.aniamte = false; 

     // Our items to handle, can be easily replaced with the setState. 
     this.state.items = ["a", "b", "c", "d", "e"]; 
    } 

    render() 
    { 
     let content = []; 
     let items = this.state.items; 
     let aniamte = this.state.aniamte; 

     content = items.map(item => 
     { 
      return React.createElement(AnimateItemComponent, {animate}); 
     }); 

     return content; 
    } 

    startAnimation() 
    { 
     this.setState({aniamte: true}); 
    } 

    stopAnimation() 
    { 
     this.setState({aniamte: false}); 
    } 

    serverRequest() 
    { 
     // Activate animation: 
     this.startAnimation(); 

     // Stop animation 
     this.stopAnimation(); 
    } 
} 

Answer 2

당신은 작업 velocity.js의 파상 기능을 사용할 수 있습니다 또는 당신은 자신에 의해 비슷한 쓰기 : 같은 유형 {divElement, timeout}의 요소로 채워집니다 별도의 배열을 만들 -하자가이 배열 pairs 전화 (채우기 위해 그것은 원래의 배열을 가로 지르고 0 < 2mins 범위 내의 타임 아웃을 모든 요소에 할당합니다.) 그리고 렌더 함수 (원본이 아닌)에서 사용하려는 빈 배열 인 newArray을 할당합니다. 당신이 당신의 pairs 배열이 준비되면, 그것을 통과하고 각 요소에 대해이 함수를 호출 :

pairs.forEach(({divElement, timeout})=> { 
     setTimeout(()=>{ 
     newArray.push(divElement) 
     }, timeout) 
}) 

을하고 그것을, 당신은 (내가 생각 배열을 jsx에 매핑) 바로 newArray의 내용을 렌더링하고 결국 도착 당신이 처음에 가진 모든 사업으로 가득 찼습니다.