Coffeescript を使用して RoR アプリで ReactJS アニメーションを使用するソリューションを探していました。
私はこれを試しました(assets/javascript/components/sidebar/teams_form.js.jsx.coffee):
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
@TeamForm = React.createClass
render: ->
`<ReactCSSTransitionGroup transitionName="example" transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<div key="1">Coucou</div>
</ReactCSSTransitionGroup>`
Chrome の開発者ツール (React タブ) には、次のように表示されます: Chrome 開発者ツールのスクリーンショット
これが私のSASSコードです( assets/stylesheets/partials/_sidebar.sass ):
.example-enter
background: yellow
transition: background 1s ease-in
.example-enter.example-enter-active
background: white
.example-leave
opacity: 1
transition: opacity .5s ease-in
.example-leave.example-leave-active
opacity: 0.01
結果のコードは何もアニメーション化しません。背景色のない単純なレンダリングを行います。私は何年もの間解決策を探していました!
(TeamForm は、要素を作成し、ID によって指定された div に追加するリンクをクリックした後にレンダリングされます)
誰かが私を助けることができれば、それは素晴らしいことです!!
どうもありがとう。
編集:jQueryでonClickクラスを追加/削除するだけで問題を回避できました。しかし、それは正しい解決策ではないようです。私はまだこれらのアニメーションがどのように機能するかを知りたいと思っています。