уменьшение объекта до заданного значения через CSS3
добрый вечер, хочется прикрутить анимацию на css для сворачивание-разворачивание модальных окон, в данный момент написал анимацию на js, но охота перенести это на плечи css. Так вот столкнулся со следующими трудностями, можно ли как то задать конечное уменьшение объекта в пикселях типо transform:scale(160px, 30px) - горизонталь и вертикаль соответственно. И вторая трудность...координаты сворачивание-разворачивание всетаки придется расчитывать на js в связи с этим вопрос, можно ли как то передать из js расчитанные координаты в css стили и по ним уже стартовать анимацию? Знаю что в js есть ивент transitionend на который можно повесить хандлер, но как добраться до стилей не понимаю пока. Подскажите кому не трудно куда копать. Спасибо.
|
вопрос по изменению до заданного размера снят. Доперло.
|
simple, набросал пример (работате только в хроме)
<!DOCTYPE HTML> <html> <head> <style> #t{ width:500px; height:500px; background-color:red; } </style></head> <body> <a href="#" id="go">start</a> <div id="t"></div> <script> function Reduce(param) { var scale = param.scale.start - 0.1; function _reduce() { if(scale < param.scale.to){ scale = param.scale.to; } param.object.style.WebkitTransform = "scale("+scale+")"; scale -= 0.1; if(scale != param.scale.to) setTimeout(_reduce, 40); }; this.Start = function () { _reduce(); }; } var reduce = new Reduce({ object: document.getElementById("t"), scale:{ to:0, start:1 } }) document.getElementById("go").onclick = function () { reduce.Start(); } </script> </body> </html> |
ааа, большое спасибо, cyber, оказывается так все элементарно, Ваш код будет базой, от него уже буду развивать идею...
Зы. т.е как я понял обратиться к свойствам трансформации в js через style нужно добавлять приставу Webkit к нужному свойству если пишем для crome...как я сам не допер то ) |
simple, почитайте эту тему http://javascript.ru/forum/events/30930-ie-ms-zoom.html , там о проблеме реализации для ИЕ и в первом посте есть для остальных браузеров( там через jquery но исправить под js не проблема).
|
обязательно прочту, а пока хочу поделиться реализацией изменения размера до пикселей я ее реализую без transition:scale(), хотелось бы узнать о правильности такого подхода, ниже стили css в упрощенной форме:
#minimize { position:absolute; left:350px; top:50px; width:400px; height:200px; -webkit-transition:all 0.2s ease-in; } #minimize:activate { -webkit-transition:translate(-350px, 854px); // в левый нижний угол, координата вычисляется программно width:160px; height:29px;// конечный размер свернутого окошка...работает однако :) } |
simple, ну тогда уже лучше использовать свойства width\height что было кроссбраузерно ..
|
конечные width/height это константа, а в translate() переменные, но теперь же я знаю как достучатся до него из js :)
|
simple, translate плохо поддерживается ие
|
поэтому можно сделать так
http://javascript.ru/forum/events/30...tml#post199328 только на уменьшение .. |
Часовой пояс GMT +3, время: 19:21. |