ReactJS: переход css не работает в компонентеDidMount

Question

Когда установлен компонент EffectBox, я хочу добавить к этому компоненту class. Но переход css не работает.

Это JS код:

var EffectBox = React.createClass({ 
    componentDidMount: function() { 
    this.show(); 
    // setTimeout(this.show, 100); 
    }, 

    show: function() { 
     $(React.findDOMNode(this)).addClass('show'); 
    }, 

    render: function() { 
     return (
     <div className="effect-box" > 
     <div className="header"></div> 
     <div className="content"> 
     ... 
     ) 
    } 
    }); 

Css следующим образом:

.effect-box { 
    transform: translate3d(0, -100%, 0); 
    transition: all .4s; 
} 

.show { 
    transform: none; 
} 

И когда я использую delay позвонить показать function(use setTimeout) СМЧ анимационные работы. На данный момент (componentDidMount), сделал ли реальный DOM-рендеринг?

Answer 1

Вместо фиксированного времени ожидания, попробуйте ждет документа, готового в componentDidMount:

componentDidMount: function() { 
    $(document).ready(function() { 
     this.show(); 
    }); 
} 

Answer 2

Я попробовал это на моем собственном Реагировать проект со следующим кодом, который, кажется, работает просто отлично:

componentDidMount: function() { 
    this.show(); 
    }, 

    show: function() { 
    React.findDOMNode(this).classList.add('show'); 
    } 

и:

.show { 
    transition: transform 400ms; 
    transform: translate3d(-200px, -200px, 0px); 
} 

Answer 3

Я встретил эту проблему, и я нашел пару решений:
Одно, что я предпочитаю больше, чтобы обернуть this.show() в requestAnimationFrame (Это мягко версия тайм-аут.)

componentDidMount: function() { 
    requestAnimationFrame(()=> {this.show();}); 
} 

Второй один очень грубо, но если вы не хотите использовать какой-либо тайм-аута вы можете вызвать relayout , Это может повредить производительности приложений.

componentDidMount: function() { 
    document.body.offsetHeight; 
    this.show(); 
}