Установка исходного местоположения с помощью CSS-переходов - PullRequest
Новая
       4

Установка исходного местоположения с помощью CSS-переходов

0 голосов
/ 18 марта 2012

Итак, я могу создать анимацию местоположения элемента, выполнив что-то вроде этого: 

Widget.style.left = Dest.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";

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

Как и ожидалось, если я попробую это: 

Widget.style.left = Src.x;
Widget.style.left = Dest.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";

Местоположение источника игнорируется, кажется, не имеет никакого эффекта.

1 Ответ

1 голос
/ 18 марта 2012

Это проблема и особенность CSS-переходов. Браузер видит только «состояние» объекта, которое он может использовать для перехода, когда ваш javascript завершен, поэтому только тогда, когда это происходит, можно установить «начальное» состояние объекта и аналогично, только тогда может быть получено конечное состояние. объект для переходов будет виден браузеру. Это означает, что: 

Widget.style.left = Src.x;
Widget.style.left = Dest.x;

ничего не сделает. Если объект является совершенно новым, единственное состояние, которое увидит браузер (для целей переходов - Dest.x, и это будет рассматриваться как начальное состояние (то есть без перехода).

Единственный способ, который я нашел, - закончить работу моего JavaScript и использовать таймер, чтобы запустить переход: 

// create Widget
Widget.style.left = Src.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";
// user a timer to get the current location marked as the starting location
// and then set the new location
setTimeout(function() {
    Widget.style.left = Dest.x;  // trigger transition from Src.x to Dest.x
}, 0);

Я говорю, что это и особенность, и проблема, потому что она имеет свои преимущества и свои проблемы. Если вы переместите объект пару раз в середине одного фрагмента JavaScript, объект не будет перемещаться между всеми этими промежуточными местоположениями, он будет только переходить в конечное местоположение. Но это создает такие проблемы, как то, с чем вы сталкиваетесь.

Редактировать: Этот пост Невозможно динамически установить перевод начального элемента перед переходом в тот же стек вызовов предполагает, что существует обходной путь, который вызывает макет браузера путем доступа к любому из Количество конкретных свойств после установки начальной позиции, прежде чем установить конечную позицию. Я сам не пробовал.

Этот обходной путь работает здесь, в Chrome: http://jsfiddle.net/jfriend00/VqTHV/

...