Javascript 如何在React JS中使用滚动魔术

我有一个React js页面，我想使用scroll magic制作一个瀑布动画，当你向下滚动时，瓶子会旋转

像这样：

但是我找不到任何关于如何在react js中使用scroll magic的文档，我能找到的最多的就是一个像我一样不工作的人的例子

这是我的代码，但什么也没发生。 请帮助我，我不知道如何在这方面前进

import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import $ from 'jquery';
import './App.css';






 class App extends Component {

   componentDidMount() { // wait for document ready
      var controller;
     $(document).ready(function($) {
    // init controller
     var controller = new ScrollMagic.Controller();
 });

 $(document).ready(function($) {
    function updateBox (e) {
      if (e.type == "enter") {
       ("#pin p").text("Pinned.") ;
      } else {
     ("#pin p").text("Unpinned.");
   }
 }
 // build scenes
 new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
   .setPin("#pin")
   .setClassToggle("#pin", "green")
   .on("enter leave", updateBox)
   .addIndicators() // add indicators (requires plugin)
   .addTo(controller);

 new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
   .setPin("#pin")
   .setClassToggle("#pin", "green")
   .on("enter leave", updateBox)
   .addIndicators() // add indicators (requires plugin)
   .addTo(controller);

 new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
   .setPin("#pin")
   .setClassToggle("#pin", "green")
   .on("enter leave", updateBox)
   .addIndicators() // add indicators (requires plugin)
   .addTo(controller);
  });
// init controller

// show pin state

  }



  render() {
   return (
     <div className="App">
       <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
       </header>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>

    <div className="spacer s1"></div>
    <div id="trigger" className="spacer s1"></div>
    <div className="spacer s0"></div>
    <div id="pin" className="box1 red">
        <p>Unpinned.</p>
        <a href="#" className="viewsource">view source</a>
    </div>
    <div className="spacer s2"></div>


  </div>
   );
  }
}

---

首先，您不应该在react应用程序中使用jQuery。您也不需要在

组件didmount

函数中使用

$（document）.ready（）

，因为如果调用此函数，文档将始终处于就绪状态

我以前从未使用过ScrollMagic，但这里有一个“清理”版本的代码，就像我用“反应方式”一样：

注意：代码未经测试

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
从“ScrollMagic”导入ScrollMagic；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.controller=new ScrollMagic.controller（）；
此.state={
pinText:“未固定。”
};
}
componentDidMount（）{
//构建场景
新的ScrollMagic.Scene（{triggerElement:#trigger'，持续时间：150}）
.setPin（“#pin”）
.setClassToggle（“引脚”、“绿色”）
.on（“输入离开”，此.updateBox）
.addIndicators（）//添加指示器（需要插件）
.addTo（本控制器）；
新的ScrollMagic.Scene（{triggerElement:#trigger]，持续时间：150，偏移量：300}）
.setPin（“#pin”）
.setClassToggle（“引脚”、“绿色”）
.on（“输入离开”，此.updateBox）
.addIndicators（）//添加指示器（需要插件）
.addTo（本控制器）；
新的ScrollMagic.Scene（{triggerElement:#trigger]，持续时间：150，偏移量：600}）
.setPin（“#pin”）
.setClassToggle（“引脚”、“绿色”）
.on（“输入离开”，此.updateBox）
.addIndicators（）//添加指示器（需要插件）
.addTo（本控制器）；
}
updateBox=（e）=>{
让newPinText=''；
如果（例如，类型==“输入”）{
newPinText='pinted'；
}否则{
newPinText='未固定'；
}
this.setState（{pinText:newPinText}）；
};
render（）{
const{pinText}=this.state；
返回(
欢迎反应
{pinText}

);
}
}

对于其他来到这里的人，react中有一个scroll magic library的端口：

谢谢你清理我的代码。但是动画仍然不起作用/事实上，您的代码就是解决方案，只是出于一些奇怪的原因，它没有工作，文本编辑器没有更新我编写的内容，只是重新启动，它就工作了。非常感谢你的帮助！很高兴我能帮助你；）

import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.controller = new ScrollMagic.Controller();
        this.state = {
            pinText: 'Unpinned.'
        };
    }

    componentDidMount() {

        // build scenes
        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

        new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
            .setPin("#pin")
            .setClassToggle("#pin", "green")
            .on("enter leave", this.updateBox)
            .addIndicators() // add indicators (requires plugin)
            .addTo(this.controller);

    }

    updateBox = (e) => {
        let newPinText = '';
        if (e.type === "enter") {
            newPinText = 'Pinned.';
        }else {
            newPinText = 'Unpinned.';
        }
        this.setState({ pinText: newPinText });
    };

    render() {
        const { pinText } = this.state;
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>

                <div className="spacer s1" />
                <div id="trigger" className="spacer s1" />
                <div className="spacer s0" />
                <div id="pin" className="box1 red">
                    <p>{pinText}</p>
                    <a href="#" className="viewsource">view source</a>
                </div>
                <div className="spacer s2" />

            </div>
        );
    }
}