Witam,

Mam pasek poziomy ze zdjęciami:

<div class="pasek">
<div class="fotka"></div>
<div class="fotka"></div>
<div class="fotka"></div>
<div class="fotka"></div>
</div>

W JS przesuwam ten pasek w lewo i w prawo ustawiając wartość left. Sama
animacja zachodzi dzięki CSS.

.pasek {
transition-property: left;
transition-duration: 1s;
}

Ostatnie zdjęcie jest takie samo jak pierwsze po to aby uzyskać efekt
zapętlenia w trybie "auto". No i teraz powstaje kłopot. Gdy pojawi się
ostatnie zdjęcie i chcę szybko wrócić do left: 0 (udając tym samym, że
nic się nie zmieniło), to dzieje się to płynnie, nawet jeśli ustawię na
chwilę transition-property: none. No chyba, że ustawię tą wartość z
dużym wyprzedzeniem czasowym, co nie wchodzi w grę. Natomiast ustawienie
w/w wartości tuż przed left:0 jest ignorowane - przynajmniej pod IE11.
Czy wiecie o co chodzi i jak to obejść bez robienia animacji przesuwu w JS?

--
Pozdrawiam
Marek

do góry

Dnia Wed, 05 Mar 2014 23:17:33 +0100, Marek napisał(a):

> dużym wyprzedzeniem czasowym, co nie wchodzi w grę. Natomiast ustawienie
> w/w wartości tuż przed left:0 jest ignorowane - przynajmniej pod IE11.
> Czy wiecie o co chodzi i jak to obejść bez robienia animacji przesuwu w JS?

transition-duration: 0s;

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

W dniu 2014-03-07 08:21, Borys Pogoreło pisze:
>
> transition-duration: 0s;
>

Niestety nie zadziałało :-(

element.style.transitionDuration=0;
element.style.left=0;

powoduje, że blok przewija się do pozycji 0 w czasie 1s (bo tyle jest w
CSS). Gdy zrobię coś takiego:

element.style.transitionDuration=0;
... pewna przerwa czasowa
element.style.left=0;

to zadziała. (IE11)

Jest jeszcze jeden mankament. Zdarzenie "transitionend" przestaje się
odpalać, ale to mniejszy problem. Mogę wywołać je jako funkcję. Trochę
dziwne...

--
Pozdrawiam
Marek

do góry