2

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クラスを追加/削除するだけで問題を回避できました。しかし、それは正しい解決策ではないようです。私はまだこれらのアニメーションがどのように機能するかを知りたいと思っています。

4

0 に答える 0