Анимация GSAP на нескольких похожих элементах - PullRequest
Новая
       19

Анимация GSAP на нескольких похожих элементах

0 голосов
/ 16 июня 2020

У меня есть раздел с div, которые отображаются как компонент React. 

class TechnologiesElement extends React.Component {
constructor(props) {
    super(props);
    this.state = {};
}
handleAnim = () => {
    const tl = gsap.timeline();

    gsap.set('.show-hidden', { width: '0', height: '0' });
    gsap.set('.show-hidden__text', { opacity: 0 });
    gsap.set(this.props.active ? this.props.name : null, { color: 'black' })


    tl.to('.show-hidden', .3, { width: '250px', height: '100px' });
    tl.add('breakpoint')
    tl.to(this.props.active ? this.props.name : null, .3, { color: 'white' }, 'breakpoint')
    tl.to('.show-hidden', .3, { height: '320px' }, 'breakpoint');
    tl.add('breakpoint2')
    tl.to('.show-hidden__text', .3, { opacity: 1 }, 'breakpoint2');
}



render() {


    return (<div className={'technologies__item ' + (this.props.className)}  >
        <div className={"show-block" + (this.props.active ? " show-block--active" : "")} ><div className="show-block--svg-container" onClick={this.props.onClick}><SVGIcon name={this.props.iconName} width={50} className="technologies__item__image" /></div>
            <p className={"technologies__item__name" + (this.props.active ? " technologies__item__name--active" : "")}>{this.props.name}</p>
        </div>
        <div className={"show-hidden" + (this.props.active ? " show-hidden--active" : "")}>
            {this.props.attributes.map(el => <p className="show-hidden__text">{el}</p>)}
        </div>
    </div>








    );
}
 }

 export default TechnologiesElement;

Проблема в том, что я хочу дать несколько анимаций gsap для каждого из них. Я попытался написать код basi c, но когда я нажимаю и один из div получает активный класс, анимация отображается на каждом элементе. Как я могу инкапсулировать эту анимацию только в один активный div? 

 class Main extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        activeIndex: null,

    };
}

handleItemClick(index) {

    if (this.state.activeIndex !== index) {
        this.setState({ activeIndex: index });



    }

    if (this.state.activeIndex === index) {

        this.setState({ activeIndex: null });


    }
    //animation



}
render() {
    let activeIndex = this.state.activeIndex;
    const technologiesItems = TechnologiesData.map((el, i) => <TechnologiesElement key={el.id} className={'direction-' + (i % 2 ? 'r' : 'l')} iconName={el.iconName} name={el.name} attributes={el.attributes} active={activeIndex === i} onClick={this.handleItemClick.bind(this, i)} />)



    return (


        <main className="main">

            <div className="technologies" id="tech">
                <h2 className="technologies__heading"><span className="span_text"> Technologie</span></h2>
                {technologiesItems}
            </div>


        </main>

    );
}
 }

 export default Main;
...