Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.05.2013, 01:03
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

понятно, а как тогда через ширину/высоту? Извиняюсь голова уже не думает, спать охота хотя в принципе ие меня мало волнует, пишу приложения специал фор хроме и ко.

Ага, прочел ваш последний пост, ситуация прояснилась, спасибо еще раз за помощь!
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются

Последний раз редактировалось simple, 13.05.2013 в 01:07.
Ответить с цитированием
  #12 (permalink)  
Старый 13.05.2013, 07:27
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

cyber, сделал трансформацию свертывания по свойствам top/left и width/height как вы и советовали, действительно теперь ещь проще стало. Но вот отлов завершения анимации у меня что то не корректно работает, вешаю на елемент событие 'transitionend' но обработчик на событие почемуто срабатывает несколько раз, в моем случае 5 раз, как сделать чтобы срабатывало один раз?
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #13 (permalink)  
Старый 13.05.2013, 08:28
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

simple, если вы сделали через top/left и width/height , то почему вы ловите 'transitionend?
и желательно бы код показать..
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #14 (permalink)  
Старый 13.05.2013, 10:34
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

анимация делается ведь через 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';
};
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются

Последний раз редактировалось simple, 13.05.2013 в 10:46.
Ответить с цитированием
  #15 (permalink)  
Старый 13.05.2013, 11:32
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

я понял почему хандлер вызывается 5 раз, ивент transitionend срабатывает при каждом переходе свойств которые применяются для анимации и описанны в transition-property:, у меня стоит all, т.е все свойства класса, при завершении анимации идет проход по ним, это top, left, width, height,opacity и того 5 переходов. Как же тогда реализовать данный эффект но с одним переходом, понимаю что это невозможно...но как тогда быть? или надо в другую сторону копать. Запутался что то уже.

Да и если маштабирование и передвижение делать через scale и transate то тогда да имеем 1 переход и 1 срабатывание хандлера...ладно с координатами в translate не трудно, но как быть с маштабированием, мне нужен конечный размер свернутого окна 158х27, без бордюров, как можно это расчитать учитывая то что развернутое окно может быть любых размеров? Хелп ми люди!
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются

Последний раз редактировалось simple, 13.05.2013 в 11:47.
Ответить с цитированием
  #16 (permalink)  
Старый 13.05.2013, 13:22
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

мда...сложновато, оказалось все наоборот, масштаб легко вычисляется надо кон.размер / нач.размер, а вот движение в перспективе трудней координаты вычислить...ладно черт с ним с этим transitionend буду по старинке через setTimeout синхронизировать.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #17 (permalink)  
Старый 13.05.2013, 15:01
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

simple, не совсем понял в чем трудности)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #18 (permalink)  
Старый 13.05.2013, 17:06
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

да как выяснилось... во всем ) не получается что то у меня программно анимацией управлять...на простых примерах вроде работает, а как непосредственно к приложению данный функционал прикрутил так началось сразу...во первых не получается обратится к свойству transform из js, пробовал так style.webkitTransform и так style.WebkitTranform, не видит его и все. И еще стартовать анимацию из js с заданными координатами у мну все равно не выходит, хотя наверное я криво подхожу к задаче...на примере я стартовал анимация добалением класса элементу, а на практике не получается передать в этот класс полученные координаты чтобы анимация запустилась как надо.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #19 (permalink)  
Старый 13.05.2013, 17:51
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

simple, эм, что сложного то
param.object.style.WebkitTransform = "scale("+scale+")";


пробуйте, вылаживайте код (желательно так что бы можно было запустить) )
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #20 (permalink)  
Старый 13.05.2013, 19:28
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

да нет ничего сложного конечно, просто синтаксическая ошибка была в моем коде которую я не сразу заметил, теперь все норм вроде, полет нормальный
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
передача объекта через параметр функции PHP zhurchik Серверные языки и технологии 1 06.12.2012 13:24
скрипт, выводящий значения checkbox в строку через запятую Pincher Javascript под браузер 12 05.10.2012 20:49
Как обратиться к переменной внутри объекта, в произвольной функцию через его метод platedz Элементы интерфейса 15 24.08.2012 23:03
Передача полю объекта - массиву, значения элемента через set метод poorking Общие вопросы Javascript 1 13.02.2011 19:22
как узнать тип значения объекта? VHS Общие вопросы Javascript 1 07.01.2009 22:57