暫停GSAP動畫完成後，第二反應組分呈現

Question

嘗試暫停或該條件的else部分內除去GSAP動畫..

集裝箱代碼 -

 renderNews =() => { 
    /** 
    * Renders news snippets, no filtering at this time 
    */ 
    let max = 2 
    let count = 0 
    let posts = this.props.posts.map((article) => { 
     count++ 
     console.log('count' + count) 
     console.log('renderNews article => ', article) 
     if (count <= max) { 
     return (
      <Grid md={0.5} sm={1} key={article.id} > 
      <SnippetNewsEvents 
       image={article.featured_media} 
       event={false} 
       title={article.title.rendered} 
       date={moment(article.date_gmt).format('Do MMMM YYYY')} 
       excerpt={article.excerpt.rendered} 
       buttonText='Read More' 
       link={'/posts/' + article.slug} 
      /> 
      </Grid> 
     ) 
     } else { 
     return (// or whatever the right grid thing is 
      <Grid md={1/3} sm={1/2} xs={1} key={article.id} > 
      <SnippetNewsEvents 
       //innerRef={null} 
       image={article.featured_media} 
       title={article.title.rendered} 
       date={moment(article.date_gmt).format('Do MMMM YYYY')} 
       // excerpt={article.excerpt.rendered} 
       buttonText='Read More' 
       link={'/posts/' + article.slug} 
      /> 
      </Grid> 
    ) 
     } 
    }) 
    return posts 
    } 

組件代碼 -

export default class SnippetNewsEvents extends React.Component { // eslint-disable-line react/prefer-stateless-function 
    constructor() { 
    super() 
    this.state = { 
     image: null 
    } 
    } 
    componentDidMount =() => { 
    this.getImage(this.props.image) 
    this.contentTween = new TimelineMax().add([ 
     TweenMax.fromTo(this.wrapper, 1, { 
     scale: '0.95' 
     }, { 
     scale: '1' 
     })]) 

    this.scene = new ScrollMagic.Scene({triggerElement: this.wrapper, triggerHook: 0.8, duration: window.innerHeight/2}) 
        .setTween(this.contentTween) 
        .addIndicators({name: 'snippets'}) 
        .addTo(scrollController) 
    } 
    getImage (image) { 
    if (typeof image === 'string') { 
     this.setState({image: image}) 
    } else if (typeof image === 'number' && image !== 0) { 
     fetch('http://hkserverdev.weruinit.com/wp-json/wp/v2/media/' + image) 
     .then(response => response.json()) 
     .then(data => { 
     this.setState({image: data.source_url}) 
     }).catch(error => { 
     if (dev) console.error('Error:', error) 
     }) 
    } 
    } 
    showImage (image) { 
    if (this.state.image == null) { 
     return null 
    } else { 
     return (
     <SnippetImage src={this.state.image} data-rjs='2' /> 
    ) 
    } 
    } 
    showLocation =() => { 
    if (this.props.event) { 
     return (
     <EventsDetailWrapper> 
      <H3c title={this.props.title}>{this.props.title}</H3c> 
      <EventsTimeLocation> 
      <Combo> 
       <Icon className='buttonIcon' src={require('../../images/time_icon.png')} data-rjs='2' /> 
       <Detail copy={this.props.date} news /> 
      </Combo> 
      <Combo> 
       <Icon className='buttonIcon' src={require('../../images/location_icon.png')} /> 
       <Detail copy={this.props.location} /> 
      </Combo> 
      </EventsTimeLocation> 
     </EventsDetailWrapper> 
    ) 
    } else { 
     return (
     <NewsDetailWrapper> 
      <Detail uppercase={this.props.event} copy={this.props.date} /> 
      <H3c>{this.props.title}</H3c> 
      <Detail excerpt copy={this.props.excerpt} /> 
     </NewsDetailWrapper> 
    ) 
    } 
    } 
    componentWillUnmount() { 
    this.scene = this.scene.destroy() 
    } 
    render (props) { 
    if (dev) console.log('SnippetNewsEvents => ', this.props) 
    return (
     <EventsItemWrapper innerRef={c => (this.wrapper = c)} className='snippet' small={this.props.compressed}> 
     {this.showImage(this.props.image)} 
     {this.showLocation(this.props.event)} 
     <Button className='hvr-trim hvr-trim-alt' black snippet link={this.props.link} content='Read More'>{this.props.content}</Button> 
     </EventsItemWrapper> 
    ) 
    } 
} 

我是新來的反應和GSAP和JS：（（

Answer 1

鑑於你已經在SnippetNewsEvents中定義this.scene，則可以使用ref停止動畫。

您應該將轉換爲class組件，然後使用其生命週期方法componentWillReceiveProps來停止或啓動動畫。我們來看看如何實現這一點：

container component 

... 

componentWillReceiveProps(nextProps) { 
nextProps.posts.map((article) => count++ ...)); 
// condition is met, stop animation 
if (count > max) { this.snippetNewEventsRef.contentScene.pause(); return; } 
} 

render() { 
    return (...<SnippetNewsEvents ref={(c) => this.snippetNewsEventsRef = c} .../>); 
} 

雖然這是我的頭頂，所以先測試一下。它應該工作：在這種情況下，this.snippetNewsEventsRef是一個對象，將有一個密鑰contentTween。

編輯：測試，工作。見JSBin here