Animacja/transition elementu, który otrzymał klasę poprzez jQuery

pytanie zadane 9 września 2018 w HTML i CSS przez bulit000 Początkujący (460 p.)
edycja 9 września 2018 przez bulit000

Hej

Męczę się z tym parę dni i postanowiłem zwrócić się o pomoc.

Mam na stronie floatingujące menu. Po przekroczeniu iluśtam pikseli na scrollu, zmieniają mi się klasy w jQ:

https://codepen.io/anon/pen/WgdMxZ

I wtedy operuję na klasie z dodatkiem .active

Pytanie:

Jak wygładzić, zaanimować to przejście? Wszystko dzieje się nagle, a chciałbym przynajmniej zrobić 0.2s transition. Dodanie wejściowej animacji w CSS w klasie .active też nic nie daje... Wydaje mi się, że ta klasa odpala się od razu po załadowaniu strony i animacja wykonuje się poza sceną, a nie w chwili przypisania klasy do elementu.

komentarz 9 września 2018 przez Tomek Sochacki Ekspert (227,510 p.)

a dałbyś nam kod, np. na codepen abyśmy mogli spróbować Ci pomóc :) ?

komentarz 9 września 2018 przez bulit000 Początkujący (460 p.)

Jasne, naskrobałem i zedytowałem pierwszego posta

komentarz 10 września 2018 przez shotokan Nałogowiec (39,660 p.)

A niby co chcesz animować, skoro w CSS nic się nie zmienia poza właściwością position? Tej właściwości się nie da animować bo niby jak.

1 odpowiedź

odpowiedź 9 września 2018 przez bulit000 Początkujący (460 p.)

...

komentarz 10 września 2018 przez zgrybus Pasjonat (24,860 p.)

strona leci w pętli nieskończonej, dziwny ten pen :)

komentarz 10 września 2018 przez bulit000 Początkujący (460 p.)

w "pętli nieskończonej"?

W każdym razie, to co chciałem pokazać jest widoczne.

komentarz 10 września 2018 przez zgrybus Pasjonat (24,860 p.)

No to chyba raczej u mnie błąd, w ogóle ten pen mi się nie wyświetla ( cały czas się odświeża )

komentarz 10 września 2018 przez bulit000 Początkujący (460 p.)

HTML:


<html>
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<body>
<div class="svg_body"></div>
</body>
</html>


CSS:


body
{
  height: 4000px;
}
.svg_body
{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: green;
}

.svg_body.active
{
  position:fixed;
  width: 200px;
  height: 200px;
  background-color: green;
}


JS:


function scrolledUp()
{
    $('.svg_body').removeClass('active');
 }

function scrolledDown()
{
    $('.svg_body').addClass('active');
}

$(window).scroll(function () {
    if ($(window).scrollTop() > 300) {
       scrolledDown()
    }
    else
    {
     scrolledUp()
    }
});



Zielony kwadrat, który przykleja się do górnej krawędzi ekranu po przekroczeniu 300px w doł.

komentarz 10 września 2018 przez zgrybus Pasjonat (24,860 p.)

wartości position nie da się animować :P

komentarz 10 września 2018 przez zgrybus Pasjonat (24,860 p.)

Zawsze możesz użyć position sticky :)

komentarz 10 września 2018 przez bulit000 Początkujący (460 p.)

Czu sticky czy fixed - bez znaczenia. Chodzi mi o znalezienie rozwiązania dla wygładzenia jakaś animacją włączania display... Jeśli się nie da animować, może istnieje jakaś okrężna droga?

komentarz 10 września 2018 przez shotokan Nałogowiec (39,660 p.)

Jak chcesz animować wejście jakiegoś elementu na stronę można wykorzystać np. transform, np.

element {
  transform: scale(0);
  transition: 1s;
}

element.active {
  transform: scale(1);
}

komentarz 11 września 2018 przez bulit000 Początkujący (460 p.)

Dobry tip, dzięki!

Podobne pytania

0 głosów

1 odpowiedź 297 wizyt

JavaScript funkcja window.sr = ScrollReveal(); nie działa dla elementu który ma w CSS efekt transition.

pytanie zadane 24 maja 2017 w JavaScript przez MMM4CI3J Użytkownik (500 p.)

0 głosów

1 odpowiedź 137 wizyt

Css, transition - oraz position elementu. PROBLEM

pytanie zadane 1 maja 2017 w HTML i CSS przez Kamil Pixel Niedbals Użytkownik (650 p.)

0 głosów

1 odpowiedź 244 wizyt

Animowanie elementów z pomocą transition, animuje tylko 4 z 5.

pytanie zadane 29 czerwca 2018 w HTML i CSS przez Paweł Kościelny Początkujący (360 p.)

Animacja/transition elementu, który otrzymał klasę poprzez jQuery

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci