CODEWITHSUNDEEP
cssreactjsreactcsstransitiongroup
user308553
user308553

Reputation: 1250

ReactCSSTransitionGroup not animating properly for transform translate

I have no trouble adding animation between route. But when I try something simple as follow:

var IntroSection = React.createClass({
render: function(){
    return(

      <div id = "intro">

      <ReactCSSTransitionGroup transitionName="introFirst" transitionAppear={true} transitionAppearTimeout={1300}>
        <span key={"hello"}>  Hello, </span>
      </ReactCSSTransitionGroup>

     [...]
    </div>

css:

  .introFirst-appear{
    opacity: 0;
    transform: translateX(-250px);
    transition: opacity 10s linear;
  }

  .introFirst-appear.introFirst-appear-active {
    opacity: 1;
    transform:translateX(0px);
  }

Opacity part works perfectly, but the translateX part doesnt work at all. Nothing moved.

the css for the div #intro, doesnt have anything special, only font, text-align, width, float:right

Upvotes: 1

Views: 990

Answers (1)

pgraham
pgraham

Reputation: 446

You're only specifying that opacity should be animated with the transition rule. Alos, according to this anwer, the transform property only applies to block level elements. Try doing this:

.introFirst-appear {
     /*...*/
     display: inline-block;
     transition: opacity 10s linear, transform 10s linear;
}

Upvotes: 1

Related Questions