уменьшение объекта до заданного значения через 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 только на уменьшение .. |
понятно, а как тогда через ширину/высоту? Извиняюсь голова уже не думает, спать охота :) хотя в принципе ие меня мало волнует, пишу приложения специал фор хроме и ко.
Ага, прочел ваш последний пост, ситуация прояснилась, спасибо еще раз за помощь! |
cyber, сделал трансформацию свертывания по свойствам top/left и width/height как вы и советовали, действительно теперь ещь проще стало. Но вот отлов завершения анимации у меня что то не корректно работает, вешаю на елемент событие 'transitionend' но обработчик на событие почемуто срабатывает несколько раз, в моем случае 5 раз, как сделать чтобы срабатывало один раз?
|
simple, если вы сделали через top/left и width/height , то почему вы ловите 'transitionend?
и желательно бы код показать.. |
анимация делается ведь через transition, вот я и вешаю на него ивента и больше я пока незнаю способов. Есть еще какой то способ отлова события завершения? Буду благодарен за помошь. Флаг завершения мне нужен чтобы подменять аватар окна на оригинал когда свертывание анимации завершится, и.т.д. Вот код:
.window {
position:absolute;
top:50px;
left:350px;
width:580px;
height:300px;
background-color:#ecf2fb;
opacity:1;
-webkit-transition:all 0.3s ease-in;
}
.minimize {
-webkit-transition:all 0.3s ease-out;
opacity:0.5;
top: // переменная
left: // переменная
width:158px;
height:27px;
//константа
}
<a onclick="minimize()">Свернуть</a>
<div class="window"></div>
var avatar = document.querySelector('.window');
avatar.addEventListener('transitionend', function () {
console.log('finish');}, true); // это в консоль выводится 5 раз почему то
function minimize() {
avatar.className = 'window minimize'
};
function restore() {
avatar.className = 'window';
};
|
я понял почему хандлер вызывается 5 раз, ивент transitionend срабатывает при каждом переходе свойств которые применяются для анимации и описанны в transition-property:, у меня стоит all, т.е все свойства класса, при завершении анимации идет проход по ним, это top, left, width, height,opacity и того 5 переходов. Как же тогда реализовать данный эффект но с одним переходом, понимаю что это невозможно...но как тогда быть? или надо в другую сторону копать. Запутался что то уже.
Да и если маштабирование и передвижение делать через scale и transate то тогда да имеем 1 переход и 1 срабатывание хандлера...ладно с координатами в translate не трудно, но как быть с маштабированием, мне нужен конечный размер свернутого окна 158х27, без бордюров, как можно это расчитать учитывая то что развернутое окно может быть любых размеров? Хелп ми люди! |
мда...сложновато, оказалось все наоборот, масштаб легко вычисляется надо кон.размер / нач.размер, а вот движение в перспективе трудней координаты вычислить...ладно черт с ним с этим transitionend буду по старинке через setTimeout синхронизировать.
|
simple, не совсем понял в чем трудности)
|
да как выяснилось... во всем ) не получается что то у меня программно анимацией управлять...на простых примерах вроде работает, а как непосредственно к приложению данный функционал прикрутил так началось сразу...во первых не получается обратится к свойству transform из js, пробовал так style.webkitTransform и так style.WebkitTranform, не видит его и все. И еще стартовать анимацию из js с заданными координатами у мну все равно не выходит, хотя наверное я криво подхожу к задаче...на примере я стартовал анимация добалением класса элементу, а на практике не получается передать в этот класс полученные координаты чтобы анимация запустилась как надо.
|
simple, эм, что сложного то
param.object.style.WebkitTransform = "scale("+scale+")";
пробуйте, вылаживайте код (желательно так что бы можно было запустить) ) |
да нет ничего сложного конечно, просто синтаксическая ошибка была в моем коде которую я не сразу заметил, теперь все норм вроде, полет нормальный :)
|
Возник еще один вопрос по данной теме, а именно как заставить дочернии объекты не уменьшаться с объектом-контейнером у которого изменяем размер и позицию через transition. Возможно ли это?
|
simple,
гугл, stackowerflow - забанили? на сколько я знаю без хаков не как, по крайней мере не видел. кстати увидел ошибку у себя в коде http://javascript.ru/forum/events/37...tml#post250086 нужно так
<!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;
function _reduce() {
scale -= 0.1;
if(scale < param.scale.to){
scale = param.scale.to;
}
param.object.style.WebkitTransform = "scale("+scale+")";
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>
|
| Часовой пояс GMT +3, время: 08:49. |