1

Имеется такой компонент, почему после срабатывания анимации элементы пропадают?

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import newid from 'utils/newid';

import WorkItem from '../WorkItem';

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        this.state = {
            showWorks: false,
            works: [
                {
                    type: 'Веб-разработка',
                    link: 'some',
                },
                {
                    type: 'Продвижение',
                    link: 'some1',
                },
                {
                    type: 'Скриптинг',
                    link: 'some',
                },
                {
                    type: 'Веб-дизайн',
                    link: 'some1',
                },
                {
                    type: 'Копирайтинг',
                    link: 'some',
                }
            ]
        }

        this.showWorks = () => {
            this.setState({
                showWorks: !this.state.showWorks,
            })
        }

    }
    
    render() {

        let workItems;

        if(this.state.showWorks) {
            let {works} = this.state;

            const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах
            const bg = document.getElementById('portfolio-panel-disk');
            let radius;
            if(bg) {
                radius = parseInt(getComputedStyle(bg).width) / 2;
            }

            workItems = works.map((currentValue, index) => {
                return <WorkItem 
                        type={currentValue.type} 
                        link={currentValue.link} 
                        key={newid()} 
                        leftOffset={radius - radius * Math.cos(angleRad * index)}
                        topOffset={radius - radius * Math.sin(angleRad * index)}  />
            })
        } else {
            workItems = null;
        }
   
        return(

            <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}>
                <div className='portfolio-panel-background' ref={this.props.linkCircle} onTransitionEnd={this.showWorks} >
                    <div className='portfolio-panel-disk' id='portfolio-panel-disk'>
                        <ReactCSSTransitionGroup
                        transitionName='work-item'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {workItems}
                        </ReactCSSTransitionGroup>
                    </div>
                </div>
            </div>
        )
    }
}
    

export default PortfolioSectionPanel;

CSS самих синих кругов, т.е. WorkItems

.work-item {
    width: 400px;
    height: 400px;
    background-color: @maxColor;
    transform:translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;
    color: @whiteColor;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &__type {
        font-size: 1.6rem;
        text-transform: uppercase;
    }

    &-enter {
        opacity: 0;
        transition: .5s;
    }

    &-enter-active {
        opacity: 1;
    }

    &-leave {
        opacity: 1;
        transition: .5s;
    }

    &-leave-active {
        opacity: 0;
    }
}

Вот как происходит в самом проекте

7
  • У вас ошибка в коде и он не открывается
    – eccs0103
    25 июл 2019 в 14:29
  • У Вас есть кастомный css? похоже на opacity:0 25 июл 2019 в 14:30
  • @Alt_F4, это не воспроизводимый пример
    – uzi_no_uzi
    25 июл 2019 в 14:46
  • @uzi_no_uzi Тогда можно было просто так поставить - без сниппетов. Хотя я всё равно не смогу дать ответ на него))
    – eccs0103
    25 июл 2019 в 14:48
  • @StrangerintheQ, прикрепил CSS
    – uzi_no_uzi
    25 июл 2019 в 14:54

1 ответ 1

0

Попробуйте следующий формат:

<Transition timeout={300} unmountOnExit={true}>
    {state => <div className={`work-item ${state}`}></div>}
</Transition >

timeout - скорость анимации в ms должна совпадать с тем что вы пишите в css;

unmountOnExit - отвечает за рендеринг в DOM если true то элемента в DOM не будет.

state - нужен для передачи состояния анимации в элемент.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.