ReactCSSTransitionGroup chỉ tốt với hoạt ảnh trong thành phần mới?

Question

Tôi có ReactCSSTransitionGroup làm việc tốt (tôi nghĩ), các thành phần mới được gắn kết mất dần trong tất cả vinh quang của nó.

Vấn đề là các thành phần được thay thế chỉ đột ngột biến mất, một vấn đề đối với tôi bởi vì cuối cùng tôi muốn rằng sự chuyển đổi các thành phần của tôi trong và ngoài viewport ...

Tôi dường như không thấy bất kỳ cách nói cho các thành phần rời khỏi làm thế nào để biến mất thanh lịch.

Tôi có thiếu thứ gì đó hay ReactCSSTransitionGroup chỉ có khả năng tạo hoạt ảnh cho thành phần đến?

CẬP NHẬT

Mã dưới đây:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router"; 
import ReactCSSTransitionGroup from "react-addons-css-transition-group"; 


class PageOne extends React.Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}> 
     <div> 
      HI FROM PAGE ONE<br /> 
      <br /> 
      <Link to="two">Take me to Page Two</Link> 
     </div> 
     </ReactCSSTransitionGroup> 
    ); 
    } 
} 
class PageTwo extends React.Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}> 
     <div> 
      HELLO FROM PAGE TWO<br /> 
      <br /> 
      <Link to="/">Go back to Page One</Link> 
     </div> 
     </ReactCSSTransitionGroup> 
    ); 
    } 
} 


const app = document.getElementById('app'); 
ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={PageOne}></Route> 
    <Route path="two" component={PageTwo}></Route> 
    </Router>, 
app); 

Và CSS:

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

Answer 1

Ok có vẻ như chúng đã hoạt động và tôi đã không khám phá nó cho đến bây giờ.

Bộ phản hồi git repo có danh sách các ví dụ và bên trong là một cho "Hoạt ảnh". Bản demo này cho thấy cách bạn có thể tận dụng ReactCSSTransitionGroup để tạo hoạt ảnh trong/ra "Trang" bằng cách sao chép phần tử và gán một khóa.

https://reacttraining.com/react-router/web/example/animated-transitions

Answer 2

tôi đã tạo ra một bin mà đang làm việc tốt cho các thành phần được gắn/tháo gắn kết. Hãy xem và cho tôi biết nếu id đó tương tự như những gì bạn đang làm và vẫn không thể giải quyết được sự cố