Donc j'utilise réact / Pose pour animer un Je suis et un - Le problème est que mon animation est toujours en train de tirer parce que Je n'ai besoin de déclencher l'animation que lorsque le chapitre change, pas tout le temps qui défile, mais je ne peux pas comprendre comment. J'ai posé une question il y a quelques heures, Ce qui n'a pas eu les animations, mais je pense que la question n'a aucun sens dans le contexte de l'animation. Toute aide est vraiment appréciée! Vitrine Composant comme Site Web de la flotte de messmates vu ici: 
poignées de poignées (E) méthode qui fait quelques éléments:
this.state.Content et Ça.state.title avec le contenu de chapitre correct de chapitres :
this.animate change toujours sur faire défiler.
3 Réponses :
Peut-être que vous pouvez utiliser celui-ci https://www.react-reveal.com / Exemples / Common / Fade
Vous n'aurez donc pas besoin de votre implémentation personnalisée?
J'ai besoin d'utiliser la pose malheureusement
Peut-être que vous pouvez vérifier le titre, donc si le titre d'état n'est pas le même que sur les chapitres [index], alors mettre à jour l'état `this.setstate ((prevstate) => {if (prevstate.title! == Chapitres [Index] .Title. ) {retour {animate:! this.state.animate, contenu: chapitres [index] .Content, titre: chapitres [index] .title}}}); `
ou si (Scrolly> = topofChapter [index] && Scrolly <= BottomofTer [index] && this.state.title! == Chapitres [Index] .title) {
Merci @Oleksandr Je suis dehors pour le moment je vais essayer ce que vous avez dit quand je rentre à la maison dans une heure. Je vous en suis reconnaissant!
J'ai fait une codesandbox avec votre suggestion, mais c'est buggy. :( Je suis trop fatigué pour enquêter plus loin maintenant, alors je vais vérifier demain. Merci quand même, et voici la codesandbox si vous étiez intéressé: codesandbox.io/s/currying-sea-ptg9u
Vous devez mettre en cache les positions des chapitres en l'enregistrant comme une matrice sur l'état du composant uniquement lorsque la page se charge avec les données de chapitres de votre DB et à chaque fois qu'un utilisateur redimensionne l'écran (car les hauteurs des composants changent lorsque Il arrive)
puis sur le défilement Comparez scrupuleusement contre ce tableau des positions de chapitre pour identifier l'endroit où vous êtes à: et en fonction de l'endroit où il est le suivant: < / p>
https://codesandbox.io/s/youthful-leftpad-33j4y devrait être l'effet que vous recherchez.
Il y a le nombre de choses que j'ai changées pour l'obtenir dans un état utilisable et des hypothèses que je devais faire. p>
Une fois l'animation de sortie terminée, vous souhaitez démarrer le i ' VE résolu cela en suivant maintenant, lechapitre actuel (le chapitre actuellement visible) et le prochainchapitre (le chapitre que vous souhaitez transmettre). p> https://popmotion.io/pose/api/posed/#posed-props- Onposecomplete P> Lorsqu'une animation est terminée, lorsque nous quittons le chapitre 0, entrez dans 1: p> ceci commence la sortie Animation sur le courant actuel. Lorsque l'animation termine, Entrée code> Animation du prochain chapitre. Le problème que vous avez eu était, vous avez déjà perdu une trace du chapitre précédent, car vous aviez déjà mis à jour le code> code> au prochain chapitre, tout en déclenchant l'animation à plusieurs reprises. P>
pose code> rappellera sur ONOSECOMPLEte code>. Si l'animation était fausse, réglez le courant actuel pour être le prochainChapitre, par exemple p> ONOSEposifleteformote code> est appelé et, si l'animate était False IE, l'animation de sortie est maintenant terminée, mettez à jour l'état à: p> onPoseComplete = () => {
Pourriez-vous partager l'ensemble de la composante?
Hey @alvaro Le composant entier est lié dans le bac à sable. Ou avez-je mal compris votre question?
Je le vois, je n'ai pas remarqué le bac à sable. Merci.
Pas de soucis, merci de jeter un coup d'oeil!