Transition-duration nie działa z JS

Odpowiedz Nowy wątek
2019-09-28 08:04

Rejestracja: 2 lata temu

Ostatnio: 4 dni temu

0

Witam,
kiedy w JS dam

document.getElementsByClassName("produkt")[i].style.width = "auto";

to transition-duration nie działa i przejście nie jest płynne. (przy hover też nie)

CSS:

.produkt
{
    float: left;
    width: 180px;
    height: auto;
    cursor: pointer;
    font-size: 19px;
    min-width: 180px;
    margin-left: 20px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition-duration: 1s;
    border: 2px #1d1d1d solid;
    padding: 10px 10px 10px 10px;
    box-shadow: 0 1px 15px #242424;
}

Jak mogę rozwiązać ten problem?

Pozostało 580 znaków

2019-09-28 14:31

Rejestracja: 2 lata temu

Ostatnio: 3 godziny temu

Animacja dla właściowości width nie zadziała, kiedy ma wartość auto.
Spróbuj może z max-width, czyli:

width: 100%;
max-width: 180px;
transition: max-width 1s linear;

wtedy w JS

document.getElementsByClassName('produkt')[i].style.maxWidth = '900px';

Jak widzisz ustawiłem transition: [transition-property] [transition-duration] [transition-timing-function], ponieważ chcemy ustawić efekt przejścia tylko dla właściwości max-width.
Wartość ustawiłem na 900px, bo założyłem, że taką szerokość może mieć element otaczający tego diva.
Jak ustawisz tą wartość na np. 9000px to wtedy animacja może sprawiać wrażenie szybciej wykonanej - dzieje się tak, ponieważ animacja trwa 1s dla szerokości 9000px, więc jeśli twój kontener ma maksymalną szerokość 900px to będzie się wydawało, że ta animacja trwała 100ms. Wypróbuj ten kod u siebie to zobaczysz i zrozumiesz o co mi chodzi.

edytowany 1x, ostatnio: aszczepanowski, 2019-09-28 14:32
Właśnie przed chwilą tak zrobiłem i działa. Dziękuję za pomoc. - Gouda105 2019-09-28 14:46

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0