12.05.2013, 23:30
|
|
Профессор
|
|
Регистрация: 23.09.2010
Сообщений: 247
|
|
уменьшение объекта до заданного значения через CSS3
добрый вечер, хочется прикрутить анимацию на css для сворачивание-разворачивание модальных окон, в данный момент написал анимацию на js, но охота перенести это на плечи css. Так вот столкнулся со следующими трудностями, можно ли как то задать конечное уменьшение объекта в пикселях типо transform:scale(160px, 30px) - горизонталь и вертикаль соответственно. И вторая трудность...координаты сворачивание-разворачивание всетаки придется расчитывать на js в связи с этим вопрос, можно ли как то передать из js расчитанные координаты в css стили и по ним уже стартовать анимацию? Знаю что в js есть ивент transitionend на который можно повесить хандлер, но как добраться до стилей не понимаю пока. Подскажите кому не трудно куда копать. Спасибо.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
|
|
12.05.2013, 23:48
|
|
Профессор
|
|
Регистрация: 23.09.2010
Сообщений: 247
|
|
вопрос по изменению до заданного размера снят. Доперло.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
|
|
13.05.2013, 00:09
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
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>
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
13.05.2013, 00:24
|
|
Профессор
|
|
Регистрация: 23.09.2010
Сообщений: 247
|
|
ааа, большое спасибо, cyber, оказывается так все элементарно, Ваш код будет базой, от него уже буду развивать идею...
Зы. т.е как я понял обратиться к свойствам трансформации в js через style нужно добавлять приставу Webkit к нужному свойству если пишем для crome...как я сам не допер то )
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
|
|
13.05.2013, 00:27
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
simple, почитайте эту тему IE and -ms-zoom , там о проблеме реализации для ИЕ и в первом посте есть для остальных браузеров( там через jquery но исправить под js не проблема).
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
13.05.2013, 01:32
|
|
Профессор
|
|
Регистрация: 23.09.2010
Сообщений: 247
|
|
обязательно прочту, а пока хочу поделиться реализацией изменения размера до пикселей я ее реализую без 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, 13.05.2013 в 01:34.
|
|
13.05.2013, 01:42
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
simple, ну тогда уже лучше использовать свойства width\height что было кроссбраузерно ..
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
13.05.2013, 01:52
|
|
Профессор
|
|
Регистрация: 23.09.2010
Сообщений: 247
|
|
конечные width/height это константа, а в translate() переменные, но теперь же я знаю как достучатся до него из js
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
|
|
13.05.2013, 01:57
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
simple, translate плохо поддерживается ие
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
13.05.2013, 01:58
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
поэтому можно сделать так
IE and -ms-zoom
только на уменьшение ..
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
|
|