css3 transform transition css3 前缀

transform 参数

div{
    transform:rotate(7deg) translate(10px,10px) scale(2);
    -ms-transform:rotate(7deg) translate(10px,10px) scale(2);   /* IE 9 */
    -moz-transform:rotate(7deg) translate(10px,10px) scale(2);  /* Firefox */
    -webkit-transform:rotate(7deg) translate(10px,10px) scale(2); /* Safari 和 Chrome */
    -o-transform:rotate(7deg) translate(10px,10px) scale(2);    /* Opera */
}

• translate(x,y) 定义 2D 转换。
• translate3d(x,y,z)定义 3D 转换。。
• scale(x,y) 定义 2D 缩放转换。
• scale3d(x,y,z) 定义 3D 缩放转换。
• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• rotate3d(x,y,z,angle) 定义 3D 旋转。
• skew(x-angle,y-angle)

transition参数

div{
    width:100px;
    transition: width 2s linear 1s;
    -moz-transition: width 2s linear 1s; /* Firefox 4 */
    -webkit-transition: width 2s linear 1s; /* Safari 和 Chrome */
    -o-transition: width 2s linear 1s; /* Opera */
}

• transition: property duration timing-function delay; 缩写

  • transition-property 规定设置过渡效果的 CSS 属性的名称。
    
    • transition-property: none|all|property;
      
      • none 没有属性会获得过渡效果。
      • all 所有属性都将获得过渡效果。
      • property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
    
    • transition-duration: time;

  • transition-timing-function 规定速度效果的速度曲线。

    • transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out
      
      • linear 规定以相同速度开始至结束的过渡效果。
      • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
      • ease-in 规定以慢速开始的过渡效果。
      • ease-out 规定以慢速结束的过渡效果。
    • ease-in-out 规定以慢速开始和结束的过渡效果。

  • transition-delay 定义过渡效果何时开始。

    • transition-delay: time;

JS 封装的css3 前缀

var elementStyle = document.createElement('div').style;

var vendor = (function(){
  var transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (var key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

function prefixStyle(style) {
  if (vendor === false) {
    return false
  }

  if (vendor === 'standard') {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

var transform = prefixStyle('transform');

el.style[transform] = `translate3d(10px,10px)`