1

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

user308553
  • 1,238
  • 4
  • 18
  • 32

1 Answers1

1

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;
}
Community
  • 1
  • 1
pgraham
  • 406
  • 3
  • 13
  • o i actually used `ALL` in my code before, which didnt work either. Since I have translateX(-250px) it should start at -250px anyways right? but it doesnt, it stayed where it is from start til end – user308553 Apr 24 '16 at 02:41
  • what happens if you add the `transform: translateX(-250px);` rule to the element using dev tools? – pgraham Apr 24 '16 at 05:23
  • dev tools as in the thing on chrome where you right click and choose 'inspect' right? I tried it and nothing changed. If I put left: -250px nothing happen either unless i put position relative – user308553 Apr 24 '16 at 06:49
  • Yeah, that's what I mean by dev tools. Also updated my answer with some more information about the `display` property. – pgraham Apr 24 '16 at 13:18