Javascript.RU

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

уменьшение объекта до заданного значения через CSS3
добрый вечер, хочется прикрутить анимацию на css для сворачивание-разворачивание модальных окон, в данный момент написал анимацию на js, но охота перенести это на плечи css. Так вот столкнулся со следующими трудностями, можно ли как то задать конечное уменьшение объекта в пикселях типо transform:scale(160px, 30px) - горизонталь и вертикаль соответственно. И вторая трудность...координаты сворачивание-разворачивание всетаки придется расчитывать на js в связи с этим вопрос, можно ли как то передать из js расчитанные координаты в css стили и по ним уже стартовать анимацию? Знаю что в js есть ивент transitionend на который можно повесить хандлер, но как добраться до стилей не понимаю пока. Подскажите кому не трудно куда копать. Спасибо.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2013, 22:48
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

вопрос по изменению до заданного размера снят. Доперло.
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2013, 23:09
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2013, 23:24
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

ааа, большое спасибо, cyber, оказывается так все элементарно, Ваш код будет базой, от него уже буду развивать идею...
Зы. т.е как я понял обратиться к свойствам трансформации в js через style нужно добавлять приставу Webkit к нужному свойству если пишем для crome...как я сам не допер то )
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2013, 23:27
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

simple, почитайте эту тему IE and -ms-zoom , там о проблеме реализации для ИЕ и в первом посте есть для остальных браузеров( там через jquery но исправить под js не проблема).
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #6 (permalink)  
Старый 13.05.2013, 00:32
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 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 в 00:34.
Ответить с цитированием
  #7 (permalink)  
Старый 13.05.2013, 00:42
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

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

конечные width/height это константа, а в translate() переменные, но теперь же я знаю как достучатся до него из js
__________________
На начальном этапе события могут казаться случайными, но постепенно проявляется связь, и в конце концов все части целого складываются
Ответить с цитированием
  #9 (permalink)  
Старый 13.05.2013, 00:57
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

simple, translate плохо поддерживается ие
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 13.05.2013, 00:58
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

поэтому можно сделать так
IE and -ms-zoom
только на уменьшение ..
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
передача объекта через параметр функции 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