Mam element ze stylem
position: relative;
transition: all 2s ease 0s;
Następnie chcę płynnie zmienić jego położenie po kliknięciu na niego, ale kiedy dodaję zmianę stylu, przejście nie następuje, zamiast tego element porusza się natychmiast.
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
Jeśli jednak zmienię color
na przykład właściwość, zmienia się to płynnie.
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
Co może być tego przyczyną? Czy istnieją nieruchomości, które nie są „przejściowe”?
EDYCJA : Myślę, że powinienem był wspomnieć, że to nie jest jQuery, to kolejna biblioteka. Kod wydaje się działać zgodnie z przeznaczeniem, style są dodawane, ale przejście działa tylko w drugim przypadku?
javascript
css
transition
php_nub_qq
źródło
źródło
.on()
metody. Jeśli nie - co to jest $$?top
pojawia się na liście, co eliminuje moje wątpliwości co dotop
braku dostępności dla przejść.top
wartości ustawionej (na przykład na 0), zanim ją zmienisz (na 200 lub cokolwiek)Odpowiedzi:
Spróbuj ustawić wartość domyślną w css (aby dać mu znać, gdzie ma się zacząć)
CSS
position: relative; transition: all 2s ease 0s; top: 0; /* start out at position 0 */
źródło
transition: top 1s ease 0s;
dlatop
tylkoByć może trzeba określić górną wartość w zestawie reguł CSS, tak, że będzie wiedzieć, jaką wartość ożywionej z .
źródło
W moim przypadku pozycja div została ustalona, dodanie lewej pozycji nie wystarczyło, zaczęło działać dopiero po dodaniu bloku wyświetlania
left:0; display:block;
źródło
Coś, co nie jest istotne dla PO, ale może dla kogoś innego w przyszłości:
W przypadku pikseli (
px
), jeśli wartość wynosi „0”, jednostkę można pominąć:right: 0
iright: 0px
obie działają.Jednak zauważyłem, że w Firefoksie i Chrome tak nie jest w przypadku jednostki sekund (
s
). Chociażtransition: right 1s ease 0s
działa,transition: right 1s ease 0
(brak jednostkis
dla ostatniej wartościtransition-delay
) nie ( działa pracę w Krawędzi jednak).W poniższym przykładzie zobaczysz, że
right
działa to zarówno w przypadku, jak0px
i0
, aletransition
działa tylko w przypadku0s
i nie działa z0
.#box { border: 1px solid black; height: 240px; width: 260px; margin: 50px; position: relative; } .jump { position: absolute; width: 200px; height: 50px; color: white; padding: 5px; } #jump1 { background-color: maroon; top: 0px; right: 0px; transition: right 1s ease 0s; } #jump2 { background-color: green; top: 60px; right: 0; transition: right 1s ease 0s; } #jump3 { background-color: blue; top: 120px; right: 0px; transition: right 1s ease 0; } #jump4 { background-color: gray; top: 180px; right: 0; transition: right 1s ease 0; } #box:hover .jump { right: 50px; }
<div id="box"> <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div> <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div> <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div> <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div> </div>
źródło
Odpowiedź: tak .
Jeżeli nieruchomość nie jest wymieniona w tym miejscu, nie jest to „przejściowa” .
Odniesienie: Animowane właściwości CSS
źródło
Dzisiaj napotkałem ten problem. Oto moje zepsute rozwiązanie.
Potrzebowałem elementu o stałej pozycji, aby przejść w górę o 100 pikseli podczas ładowania.
var delay = (ms) => new Promise(res => setTimeout(res, ms)); async function animateView(startPosition,elm){ for(var i=0; i<101; i++){ elm.style.top = `${(startPosition-i)}px`; await delay(1); } }
źródło