CSS Transition не работает с верхним, нижним, левым, правым

91

У меня есть стильный элемент

position: relative;
transition: all 2s ease 0s;

Затем я хочу плавно изменить его положение после нажатия на него, но когда я добавляю изменение стиля, переход не происходит, вместо этого элемент перемещается мгновенно.

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

Однако если я, colorнапример, изменю свойство, оно изменится плавно.

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

Что могло быть причиной этого? Есть ли свойства, которые не являются «переходными»?

РЕДАКТИРОВАТЬ : Думаю, я должен был упомянуть, что это не jQuery, это еще одна библиотека. Код работает как задумано, стили добавляются, но переход работает только во втором случае?

php_nub_qq
источник
2
Предполагая, что $$ является псевдонимом для jQuery, выполнение [0] вернет собственный объект dom (в отличие от объекта jquery) и не будет иметь никакого .on()метода. Если нет - что такое $$?
xec 04
Ничего из этого неверно, если вы используете jQuery, нет ничего, что называется style (), а в собственном JS это определенно не работает.
adeneo 04
1
Есть набор правил, которые можно переходить. см. спецификацию W3
Goldentoa11 04
@ Goldentoa11 topесть в списке, что избавляет меня от сомнений в том, что topон недоступен для переходов.
php_nub_qq 04
3
@php_nub_qq Проверьте ответ adaneo и мой комментарий к нему, судя по всему, вам нужно начать с установленного topзначения (например, на 0), прежде чем вы измените его (на 200 или что-то еще)
xec

Ответы:

191

Попробуйте установить значение по умолчанию в CSS (чтобы он знал, где вы хотите, чтобы это началось)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */
xec
источник
11
или только transition: top 1s ease 0s;заtop
Олег Абражаев
16

Возможно , вам необходимо указать верхнее значение в вашем наборе правил CSS, так что он будет знать , какое значение одушевленного из .

Сарахолден
источник
2

В моем случае положение div было исправлено, добавления левой позиции было недостаточно, он начал работать только после добавления блока отображения

left:0; display:block;

Самех
источник
2

Что-то, что не актуально для OP, но, возможно, для кого-то еще в будущем:

Для пикселей ( px), если значение равно «0», единицу измерения можно не указывать: right: 0и right: 0pxоба работают.

Однако я заметил, что в Firefox и Chrome это не относится к секундной единице ( s). В то время как transition: right 1s ease 0sработа, transition: right 1s ease 0(отсутствует устройство sдля последнего значения transition-delay) не не (это делает работу в Крае однако).

В следующем примере вы увидите, что это rightработает для обоих 0pxи 0, но transitionработает только для 0sи не работает с 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
источник
-1

Я столкнулся с этой проблемой сегодня. Вот мое хакерское решение.

Мне нужен был элемент с фиксированной позицией для перехода вверх на 100 пикселей при загрузке.

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);
  }
}
Андре Брэдшоу
источник