Переходы React.js не работают для «fade out»

У меня есть компонент React.js, который я пытаюсь «исчезать» с помощью React CSS Transitions. Он отлично работает для того, чтобы затухать, но когда я нажимаю, чтобы удалить объект, он сразу исчезает (вместо эффекта красивого замирания).Переходы React.js не работают для «fade out»

Код:

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionLeave={true} 
    transitionEnterTimeout={600} 
    transitionAppearTimeout={600} 
    transitionLeaveTimeout={300} 
> 
    some object 
</ReactCSSTransitionGroup>

CSS:

/Реагировать переходы/

.example-enter { 
    opacity: 0.01; 
    transition: opacity .5s ease-in; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
} 

.example-leave { 
    opacity: 1; 
    transition: opacity 1s ease-in; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 

.example-appear { 
    opacity: 0.01; 
    transition: opacity 1s ease-in; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
}

источник

2016-03-02 user1072337

Это прекрасно работает? Вы уверены, что нет других ошибок? – Guy

Нет ошибок. Увядание в работах просто прекрасное. Но когда он «исчезает», эффект эффекта не исчезает. – user1072337

Я не вижу никаких проблем при попытке воспроизвести. См. [Здесь] (http://codepen.io/guyfedwards/pen/zqvRZg?editors=0110) – Guy

Я нашел проблему в вашем CSS просто удалить комментировал строку:

.example-leave.example-leave-active { 
    opacity: 0.01; 
    /*transition: opacity 300ms ease-in;*/ 
}

источник

2016-03-06 07:23:48 Hamid

Я не вижу, как эта строка может привести к немедленному исчезновению объекта. И я думаю, что продолжительность перехода должна быть разной для разных переходов. – ArneHugo

@ArneHugo код [услышать] (http://codepen.io/guyfedwards/pen/zqvRZg?editors=0110), и я модифицировал код и вижу результат. когда я прокомментировал указанную линию, показывающую и скрывающуюся, абсолютно то же самое. – Hamid

Да, это имеет смысл, так как линия, которую вы удаляете, изменяет продолжительность перехода на 300 мс при выходе из активного состояния. Однако это похоже на дизайн. Кроме того, с длительностью перехода 300 мс элемент не должен «исчезать немедленно», но исчезать более 300 мс (что достаточно долго, чтобы увидеть, как оно исчезает). Вероятно, у искателя есть еще одна ошибка в его коде, которая вызывает его проблему. – ArneHugo

Here is a working jsfiddle demo

var {CSSTransitionGroup} = React.addons; 

var Fade = React.createClass({ 
    getInitialState() { 
     return { 
      items: ["Hello"] 
     } 
    }, 
    clickHandler (e) { 
     this.setState({items:[]}); 
    }, 
    render: function() { 
     var {items} = this.state; 
     return (
      <CSSTransitionGroup transitionName="example" 
     transitionAppear={true} 
     transitionLeave={true} 
     transitionEnterTimeout={600} 
     transitionAppearTimeout={600} 
     transitionLeaveTimeout={300}> 
      {items.map(item => <div onClick={this.clickHandler}>{item}</div>)} 
     </CSSTransitionGroup> 
     ); 
    } 
}); 

ReactDOM.render(<Fade/>, document.getElementById('container'));

Я предполагаю, что вы пытаетесь удалить дочерний узел с помощью манипулирования DOM. Этот переход будет работать только в том случае, если вы разрешите его повторно выполнить через метод рендеринга.

источник

2016-03-11 11:14:04 nikhil

Переходы React.js не работают для «fade out»

ответ

Смежные вопросы