0
私はルート間にアニメーションを追加することができます。しかし、私は次のように簡単な何かをしようとすると:ReactCSSTransitionGroupが変換のために適切にアニメートされていません
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);
}
不透明部分が完璧に動作しますが、移動X部分のdoesntの仕事ですべて。何も動いていない。
のdiv #intro
ためのCSSは、唯一font
、text-align
、width
、float:right
私は実際に自分のコードで 'ALL'を使用しましたが、これもどちらもうまくいきませんでした。私はtranslateX(-250px)を持っているので、-250pxで始まるはずです。しかし、それはどこから始まっていたのでしょうか? – user308553
devツールを使用して 'transform:translateX(-250px);'ルールを要素に追加するとどうなりますか? – pgraham
devツールは右クリックして 'inspect'を右クリックするとChrome上のものと同じですか?私はそれを試して何も変わっていない。私が左に置いた場合:-250px何も私は相対的な位置を入れない限り起こる – user308553