我试图去与react-scrollmagic和react-gsap夹具和在尝试实现滚动激活不透明淡入/淡出从一个组件滚动到下一个类似于看到here但是我正在做几乎没有任何进展的时候。 ..我可以与吐温的子元素,但不能把它扩展到组件级。任何人都可以帮助我了解的实施?这是我在此刻其中:
/*./Components/Test.js */
import React, { Component } from "react";
class Test extends Component {
render() {
return (
<div id={this.props.id}>Component</div>
);
}
}
/* App.js */
import React from 'react';
import { Tween, Timeline } from 'react-gsap';
import { Controller, Scene } from 'react-scrollmagic';
import Test from "./Components/Test";
<div className="App">
<Controller>
<Scene duration={50} triggerElement="#test">
{(progress) => (
<Tween
from={{
css: {
opacity: '1',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
opacity: '0',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<Test id='test'/>
</Tween>
)}
</Scene>
</Controller>
</div>
谢谢!
好吧,我得到它的工作,scrollmagic似乎并没有在组件层次上工作,因此它需要在各个组件中实现。
这个片段将与从第一到第二要素平稳淡入淡出效果过渡,同时保持叠加文本可见。我结合使用这与是固定的,但是在达到所述第二元件时衰为0.9的不透明度的背景图像。让我知道更多这方面的细节而被通缉。
<div>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
opacity: '1',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
opacity: '0.1',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id='first-container' style={{backgroundColor:'blue',height:'100vh'}}>
<div id='first-content'>
<h1 >Header1</h1>
</div>
</div>
</Tween>
)}
</Scene>
</Controller>
<div id='second-container' style={{backgroundColor:'red',height:'100vh'}}>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
opacity: '0',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
opacity: '0.9',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id='second-content' style={{height:'100%'}}>
<h1 >header2</h1>
<p >test</p>
</div>
</Tween>
)}
</Scene>
</Controller>
</div>
</div>