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

animacja slider

VPS Starter Arubacloud
–1 głos
566 wizyt
pytanie zadane 22 września 2018 w JavaScript przez fyrr Użytkownik (910 p.)

Witam, mam problem odnośnie dodania prostej animacji przejścia jednego zdjęcia w kolejne na sliderze. Chodzi o to, że za każdym razem po wciśnięciu na strzałkę w lewo lub w prawo chciałbym nadać jakieś lekkie opacity na kolejny element img żeby  zmiana nie była natychmiastowa tylko np. 0.5s. Napisałem sobie taki kodzik w jsie: 

function slideLeft() {

    slideAnim();

    index--;

    if (index < 0) {
        index = photos.length - 1;
        actualSlide.src = photos[index];

    } else {
        actualSlide.src = photos[index];
    }

}

function slideRight() {

    slideAnim();

    if (index == photos.length - 1) {
        index = -1;
    }

    index++;
    actualSlide.src = photos[index];
}

function slideAnim() {
    actualSlide.classList.toggle('active');
}

leftBar.addEventListener('click', slideLeft)
rightBar.addEventListener('click', slideRight)

W cssie mam: 

.slide {
    width: 100%;
    height: 100%;
}

.slide.active {
    animation: slide .5s linear;
}

@keyframes slide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


Odwołuję się do znacznika img o klasie .slide: 

<div class="sliderBox clearfix">
                <div class="barL"><i class="fas fa-angle-left"></i></div>
                <div class="slider"><img class="slide" src="img/projects/1.jpg" alt="furniture"></div>
                <div class="barR"><i class="fas fa-angle-right"></i></div>
            </div>

Problem polega na tym, że animację dodaje mi tylko na co drugie zdjęcie, rozumiem że to przez metodę toggle. Teraz pojawia się pytanie jak dodawać animację za każdym razem. 

1 odpowiedź

+2 głosów
odpowiedź 22 września 2018 przez arces Pasjonat (17,700 p.)
Można zrobić tak, że najpierw dodajesz klasę do danego elementu, która odpowiada za animację. A następnie po zakończeniu animacji tę klasę usuwa. Przy addEventListener jest event transitionend i wtedy właśnie napisać funkcję, która będzie usuwała daną klasę dotyczącą animacji.

Warto też po prostu przejrzeć najpopularniejsze skrypty slider'ów i zobaczyć jak tam to jest rozwiązane :)
komentarz 22 września 2018 przez fyrr Użytkownik (910 p.)
Dzięki za ukierunkowanie !

Podobne pytania

–1 głos
1 odpowiedź 134 wizyt
pytanie zadane 13 października 2020 w JavaScript przez Jarek_css Nowicjusz (160 p.)
0 głosów
1 odpowiedź 757 wizyt
0 głosów
0 odpowiedzi 157 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...