Wie animiere ich das Bild in der Reaktion, wenn sich das Bild nach einiger Zeit ändert?

Question

Ich versuche, einen Bildschieberegler in Reaktion zu setzen, in dem sich eine image nach 5000 Sekunden ändert. Ich überprüft von hier aus http://mumbaimirror.indiatimes.com/. Wo diese Website diese Funktionalität implementieren. Ich versuchte gleichen diesen in implementieren reagiere .Ich ist in der Lage, das zu machen, aber mein Bild gleitet nicht (von rechts nach links) mit anderen Worten Bild nicht Animation zeigt, wenn die zweite Bild zeigt n Ansicht hier mein Code https://codesandbox.io/s/YrO0LvAA

constructor(){ 
    super(); 
    this.pre=this.pre.bind(this); 
    this.next=this.next.bind(this); 
    this.state ={ 
     currentSlide :0 
    } 
    setInterval(()=>{ 
     var current = this.state.currentSlide; 
    var next = current + 1; 
    if (next > this.props.stories.items.length - 1) { 
     next = 0; 
    } 
      this.setState({ currentSlide: next }); 

    }, 5000); 


    } 

Answer 1

Eine Möglichkeit, dies zu tun, ist immer die Zukunft Bild hat (nächstes Bild) auf der rechten Seite bereit sein, so können Sie ihn nach links Übergang, zur gleichen Zeit über Sie die alten zu die linke. Sie bewegen sich also beide zusammen.

In React würde dies bedeuten, dass Sie den Index sowohl des aktuellen Bildes als auch des nächsten Bildes speichern müssen, und alle X Sekunden müssen Sie beide nach links (oder rechts je nach Ihrer Aktion) verschieben

Hier ein Proof of concept ist:

https://codepen.io/nashio/pen/xLKepZ

const pics = [ 
    'https://cdn.pixabay.com/photo/2017/06/19/07/12/water-lily-2418339__480.jpg', 
    'https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641__480.jpg', 
    'https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg', 
    'https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg', 
]; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    const idxStart = 0; 
    this.state = { 
     index: idxStart, 
     next: this.getNextIndex(idxStart), 
     move: false, 
    }; 
    } 

    getNextIndex(idx) { 
    if (idx >= pics.length - 1) { 
     return 0; 
    } 
    return idx + 1; 
    } 

    setIndexes(idx) { 
    this.setState({ 
     index: idx, 
     next: this.getNextIndex(idx) 
    }); 
    } 

    componentDidMount() {   
    setInterval(() => { 
     // on 
     this.setState({ 
     move: true 
     }); 
     // off 
     setTimeout(() => { 
     this.setState({ 
      move: false 
     }); 
     this.setIndexes(this.getNextIndex(this.state.index)); 
     }, 500); // same delay as in the css transition here 

    }, 2000); // next slide delay 
    } 
    render() { 
    const move = this.state.move ? 'move' : ''; 
    if (this.state.move) { 

    } 
    return (
     <div className="mask"> 
     <div className="pic-wrapper"> 
      <div className={`current pic ${move}`}> 
      {this.state.index} 
      <img src={pics[this.state.index]} alt="" /> 
      </div> 
      <div className={`next pic ${move}`}> 
      {this.state.next} 
      <img src={pics[this.state.next]} alt="" /> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

React.render(<App />, document.getElementById('root')); 


// CSS 

.pic { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    img { 
    width: 100px; 
    height: 100px; 
    } 
} 

.current { 
    left: 100px; 
} 

.current.move { 
    left: 0; 
    transition: all .5s ease; 
} 

.next { 
    left: 200px; 
} 

.next.move { 
    left: 100px; 
    transition: all .5s ease; 
} 

.pic-wrapper { 
    background: lightgray; 
    left: -100px; 
    position: absolute; 

} 

.mask { 
    left: 50px; 
    overflow: hidden; 
    width: 100px; 
    height: 120px; 
    position: absolute; 
} 

EDIT: die POC ein wenig aktualisiert linken und rechten Navigation zu handhaben, siehe vollständige Sache HERE

Answer 2

Dies ist keineswegs eine elegante Lösung bedeutet, aber es hat von der linken Seite das Bild gleiten, wenn es erscheint zuerst: https://codesandbox.io/s/xWyEN9Yz

ich denke, dass das Problem die Sie haben, weil Sie nur Rendering die aktuelle Geschichte, aber ein großer Teil Ihres Codes schien davon auszugehen, dass es ein rollendes Karussell von Geschichten geben würde, die Sie alon animieren könnten g, wie eine Rolle.

Mit dem Rolling-Carousel-Ansatz wäre es so einfach, die linke CSS-Eigenschaft zu animieren und diese basierend auf der aktuell sichtbaren Story anzupassen. I.e. Verwalte einen Zustand in deiner Komponente, der der aktuelle Index ist, und setze dann die Eigenschaft "left" des Storycontainers auf ein Vielfaches dieses Indexes. ZB:

const getLeftForIndex = index => ((index*325) + 'px'); 

<div className="ImageSlider" style={{ left: getLeftForIndex(currentStory) }}> 
    <Stories /> 
</div>