уменьшение объекта до заданного значения через 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, время: 12:32. |