• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

react carusel framer-motion

Object Storage Arubacloud
0 głosów
329 wizyt
pytanie zadane 14 sierpnia 2020 w JavaScript przez rob Bywalec (2,440 p.)

Witam, mam problem z animacją która działa tylko na pierwszym elemencie w carousel, myślę, że dlatego, że kod carousel jest odpalomny w całości i te animacje odbywają się tylko, że ich nie widać bo przecież znajdujemy się na elemencie 1. Czy ktoś zna jakiś sposób aby to przeskoczyć? chodzi o te dwa prostokąty na środku które animują tylko na pierwszym elemencie

code

 https://github.com/robkot500/electric_site

live

https://robkot500.github.io/electric_site/

Proszę o pomoc

1 odpowiedź

0 głosów
odpowiedź 14 sierpnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Powiem Ci, że bardzo się rozwijasz pod kątem pisania kodu w react, oby tak dalej :)

Co do problemu - nie wiem czy to będzie rozwiązanie ale dlaczego nie stworzysz sobie pod komponentu dla pojedynczego itema z karuzeli?

<div className='carousel-item carousel-item-two'>
  <div onClick={() => reactSwipeEl.prev()} className='arrow-wrapper'><i class="fas fa-angle-left"></i></div>
  <div className='item-wrapper'>
      <motion.div animate={{ y: 200, }} transition={{ ease: "easeOut", duration: 0.1 }} className='item item-up'>Fotowoltaika</motion.div>
      <motion.div animate={{ y: -210 }} transition={{ ease: "easeOut", duration: 0.1 }} className='item item-down'>Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.</motion.div>
  </div>
  <div onClick={() => reactSwipeEl.next()} className='arrow-wrapper'><i class="fas fa-angle-right"></i></div>
</div>

Ten kod jest powielany i myślę, że jeśli go wywalisz do pojedynczego komponentu (i będziesz je rerenderował) to powinno rozwiązać problem :)

komentarz 14 sierpnia 2020 przez rob Bywalec (2,440 p.)

dziękuję bardzo :), bardzo mnie cieszą takie słowa,

tak masz rację, ale to był tak zwany brudny kod pisany na gorąco i przez chwilę myślałem, że to rozwiąże problem ale nie....:(

zrobiłem to tak

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
import { motion } from 'framer-motion';

const Carousel = () => {
    let reactSwipeEl;
    const it = ['one', 'two', 'three', 'four']
    const items = it.map(item => {
        console.log(item)
        return (
            <div className={`carousel-item carousel-item-${item}`}>
                <div onClick={() => reactSwipeEl.prev()} className='arrow-wrapper'><i class="fas fa-angle-left"></i></div>
                < div className='item-wrapper' >
                    <motion.div animate={{ y: 200, }} transition={{ ease: "easeOut", duration: 0.4 }} className='item item-up'>Instalacje elektryczne</motion.div>
                    <motion.div animate={{ y: -210 }} transition={{ ease: "easeOut", duration: 0.4 }} className='item item-down'>Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.</motion.div>
                </div >
                <div onClick={() => reactSwipeEl.next()} className='arrow-wrapper'><i class="fas fa-angle-right"></i></div>
            </div >
        )


    })

    return (
        <div className='carousel-container'>
            <ReactSwipe
                className="carousel"
                swipeOptions={{ disableScroll: true, continuous: true, auto: 3000, }}
                ref={el => (reactSwipeEl = el)}
            >
                {items}
            </ReactSwipe>
            <div className='abc'>Profesjonalne usługi elektryczne w Rybniku i okolicach. Zaufaj wiedzy i doświadczeniu.</div>

        </div>
    );
};
export default Carousel

ale nie pomogło.... :(

komentarz 14 sierpnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

https://codesandbox.io/s/headless-rgb-sokv4?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:578-590

Kombinowałem dość długo z twoim problemem i o ile udało mi się znaleźć rozwiązanie dla wyłapania eventu, który zmienia stan Twojej karuzeli (link wyżej) o tyle nie ogarniam biblioteki do animacji. Nie umiałem dogrzebać się do miejsca w którym rozpoczyna się animacje. 

komentarz 14 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
komentarz 14 sierpnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Szczerze siedziałem przy tym półtorej godziny i nie mam sił wracać do tej biblioteki. :D Ja jestem zwolennikiem pisania własnych animacji w czystym css. Przy tym kodzie udało mi się dobrnąć do wyłapania eventu podczas zmiany slida w karuzeli, co też nie było napisane w dokumentacji (a przynajmniej to co tam napisali nie działało) no ale dalej już poległem z tym refreshem animacji.
komentarz 14 sierpnia 2020 przez rob Bywalec (2,440 p.)
W kązdym razie dziękuję wszystkim, chyba muszę coś zmienić na stronie......:(
komentarz 15 sierpnia 2020 przez rob Bywalec (2,440 p.)
a jak jest rozwiązywane w react stosowanie animacji w SPA, skoro kod od razu jest uruchamiany dla elementu położonego poza widocznością- niżej to też od razu jest uruchamiana animacja i nie będzie widoczna jak użytkownik przejdzie do tego miejsca-, jest jakiś trigger który wyzwala tą animację? albo jakiś inny sposób?

Podobne pytania

0 głosów
1 odpowiedź 109 wizyt
pytanie zadane 13 sierpnia 2020 w JavaScript przez rob Bywalec (2,440 p.)
+1 głos
1 odpowiedź 144 wizyt
pytanie zadane 7 października 2017 w JavaScript przez ShiroUmizake Nałogowiec (46,300 p.)
0 głosów
0 odpowiedzi 71 wizyt
pytanie zadane 29 marca 2021 w JavaScript przez Hardwell Dyskutant (8,980 p.)

92,762 zapytań

141,686 odpowiedzi

320,499 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...