mootools Fx를 사용하여 div 확대/축소 수정

Question

div의 확대/축소 스타일 (전체 내용)을 애니메이션으로 적용하려는 경우가 있습니다. 가독성은 요소를보기 위해 '팝 (pop)'하기 때문에 문제가되지 않습니다. 이제 Fx를 사용하여 다른 모든 스타일의 애니메이션을 만들 수는 있지만 확대/축소를 위해이 기능을 사용할 수는 없습니다.

이것은 크롬입니다 (분명히 나는 ​​브라우저 불가지론도 원합니다).

Chrome 개발자 도구의 요소 탭을 사용하면 HTML 요소에 줌 스타일을 수동으로 설정할 수 있으며 이에 따라 동작하므로 코드를 수정할 수 있어야한다는 것을 알고있었습니다. zoom css/javascript 내가 코드로 확대 및 축소 할 수있는 요소를 얻을 수 있습니다 :이 질문에 대한 답을 사용

dialog.setStyle('WebkitTransform', 'scale(0.1)') 

지금 내가이 작업을 수행 할 수있는 '기본'기능을 쓸 수 있습니다, 그러나 나는 밖으로 잃을 것 Fx의 모든 멋진 애니메이션 옵션. 누구나 Fx로 이것을 달성하기위한 우아한 방법을 제안 할 수 있습니까?

Answer 1

예, FX를 사용할 수있게하려면 mootools 코어에서 일부 CSS 파서를 해킹해야합니다.

이 재미있는 예를 확인하십시오. 다른 SO 문제를 위해 잠시 뒤에 했어요. http://jsfiddle.net/dimitar/ZwMUH/ - 두 개의 아이콘을 클릭하여 스왑하고 크기 조정을 통해 전환합니다.

또는이 라이트 박스 기본 클래스는 또한 그것을 사용하는 쓴 :

Element.Styles.MozTransform = "rotate(@deg) scale(@)"; 
Element.Styles.MsTransform = "rotate(@deg) scale(@)"; 
Element.Styles.OTransform = "rotate(@deg) scale(@)"; 
Element.Styles.WebkitTransform = "rotate(@deg) scale(@)"; 

Object.append(Fx.CSS.Parsers, { 

    TransformScale: { 
     parse: function(value) { 
      return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false; 
     }, 
     compute: function(from, to, delta) { 
      return Fx.compute(from, to, delta); 
     }, 
     serve: function(value) { 
      return 'scale(' + value + ')'; 
     } 
    } 

}); 

또한 관련, 모든 스타일의 공공 및 스크립팅 적이있는 정의 : 파서를 모딩에 의해 시작, 그 기본에서 http://jsfiddle.net/dimitar/6creP/

을 십자가 브라우저 :

transforms: { 
    computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'], 
    raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform'] 
}; 

위에서 정의한 변환을 반복하고 요소가 지원하는 검색 방법을 반환하는 검색 방법 경우에 사용할 수없는 대체로서 확실한 미래에 작동하는 속성 또는 불투명도 같이

 var testEl = new Element("div"), 
      self = this; 
     this.scaleTransform = this.options.transforms.computed.some(function(el, index) { 
      var test = el in testEl.style; 
      if (test) { 
       self.prop = self.options.transforms.raw[index]; 
      } 

      return test; 
     }); 

     if (!this.prop) { 
      this.prop = "opacity"; 
     } 

다음 this.prop가 올바른 브라우저 속성을 참조합니다, 공급 업체는 this.scaleTransform 반면 모핑하는 것/트위닝에 대한 대체로서 접두사 또는 불투명도 부울 (boolean)을 사용하여 크기를 조절할 수 있습니다. 그런 다음이를 확인하여 morph 객체를 만들 때 지원되는지 여부를 확인할 수 있습니다.

자체가 이렇게 될 것입니다 목적 : 자사는 기본적으로 될 것 https://github.com/tbela99/Fx.css

:

var morphObj = {}; 
morphObj[this.prop] = ["scale(0)", "scale(1)"]; // call it dynamically 
el.morph(morphObj); 

다른 솔루션은이 플러그인 http://mootools.net/forge/p/fx_tween_css3로 사용할 수있는, 내가 알고 Theiry 벨라가 하나있다 mootools 2.0에서 사용 가능

재미 있습니다.