Форум

simple · #1 (**permalink**) 12.05.2013, 23:30

добрый вечер, хочется прикрутить анимацию на css для сворачивание-разворачивание модальных окон, в данный момент написал анимацию на js, но охота перенести это на плечи css. Так вот столкнулся со следующими трудностями, можно ли как то задать конечное уменьшение объекта в пикселях типо transform:scale(160px, 30px) - горизонталь и вертикаль соответственно. И вторая трудность...координаты сворачивание-разворачивание всетаки придется расчитывать на js в связи с этим вопрос, можно ли как то передать из js расчитанные координаты в css стили и по ним уже стартовать анимацию? Знаю что в js есть ивент transitionend на который можно повесить хандлер, но как добраться до стилей не понимаю пока. Подскажите кому не трудно куда копать. Спасибо.

simple · #2 (**permalink**) 12.05.2013, 23:48

вопрос по изменению до заданного размера снят. Доперло.

cyber · #3 (**permalink**) 13.05.2013, 00:09

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>

simple · #4 (**permalink**) 13.05.2013, 00:24

ааа, большое спасибо, cyber, оказывается так все элементарно, Ваш код будет базой, от него уже буду развивать идею...
Зы. т.е как я понял обратиться к свойствам трансформации в js через style нужно добавлять приставу Webkit к нужному свойству если пишем для crome...как я сам не допер то )

cyber · #5 (**permalink**) 13.05.2013, 00:27

simple, почитайте эту тему IE and -ms-zoom , там о проблеме реализации для ИЕ и в первом посте есть для остальных браузеров( там через jquery но исправить под js не проблема).

simple · #6 (**permalink**) 13.05.2013, 01:32

обязательно прочту, а пока хочу поделиться реализацией изменения размера до пикселей я ее реализую без 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;// конечный размер свернутого окошка...работает однако :)
}

cyber · #7 (**permalink**) 13.05.2013, 01:42

simple, ну тогда уже лучше использовать свойства width\height что было кроссбраузерно ..

simple · #8 (**permalink**) 13.05.2013, 01:52

конечные width/height это константа, а в translate() переменные, но теперь же я знаю как достучатся до него из js

cyber · #9 (**permalink**) 13.05.2013, 01:57

simple, translate плохо поддерживается ие

cyber · #10 (**permalink**) 13.05.2013, 01:58

поэтому можно сделать так
IE and -ms-zoom
только на уменьшение ..

Форум

Справочник

Discord чат

Курсы javascript