CSS Transition nie działa z górnym, dolnym, lewym i prawym

91

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ę colorna 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?

php_nub_qq
źródło
2
Zakładając, że $$ jest aliasem dla jQuery, wykonanie [0] zwróci natywny obiekt dom (w przeciwieństwie do obiektu jquery) i nie będzie mieć żadnej .on()metody. Jeśli nie - co to jest $$?
xec
Nic z tego nie jest poprawne, jeśli używasz jQuery, nie ma nic o nazwie style (), aw natywnym JS na pewno tak nie działa.
adeneo
1
Istnieje zestaw reguł, które można przenieść. patrz Specyfikacja W3
Goldentoa 11
@ Goldentoa11 toppojawia się na liście, co eliminuje moje wątpliwości co do topbraku dostępności dla przejść.
php_nub_qq
3
@php_nub_qq Sprawdź odpowiedź adaneo i mój komentarz do niej, patrząc na to, musisz zacząć od topwartości ustawionej (na przykład na 0), zanim ją zmienisz (na 200 lub cokolwiek)
xec

Odpowiedzi:

191

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 */
xec
źródło
11
lub transition: top 1s ease 0s;dla toptylko
Oleg Abrazhaev
16

Być może trzeba określić górną wartość w zestawie reguł CSS, tak, że będzie wiedzieć, jaką wartość ożywionej z .

sarahholden
źródło
2

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;

Sameh
źródło
2

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: 0iright: 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 0sdziała, transition: right 1s ease 0(brak jednostki sdla ostatniej wartości transition-delay) nie ( działa pracę w Krawędzi jednak).

W poniższym przykładzie zobaczysz, że rightdziała to zarówno w przypadku, jak 0pxi 0, ale transitiondziała tylko w przypadku 0si nie działa z 0.

#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>

LWChris
źródło
0

Czy istnieją nieruchomości, które nie są „przejściowe”?

Odpowiedź: tak .

Jeżeli nieruchomość nie jest wymieniona w tym miejscu, nie jest to „przejściowa” .

Odniesienie: Animowane właściwości CSS

Robert Shaw
źródło
-1

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);
  }
}
Andre Bradshaw
źródło