共有するcssプレフィックスメソッドを自動的に追加します

cssプレフィックスメソッドを自動的に追加します

cssスタイルにプレフィックスを自動的に追加する方法。

1：ステップ1

ブラウザのネイティブメソッドを使用して要素を作成し、スタイルを取得し、作成された要素に従ってブラウザのプレフィックスを取得します

let elementStyle = document.createElement('div').style

2：ステップ2

ブラウザプレフィックスには次の5種類があります。

プレフィックス	ブラウザ
webkit	サファリ、クロームブラウザ
moz	Firefoxブラウザ
ザ・	Operaブラウザ
MS	すなわちブラウザ
プレフィックスなし	標準デフォルト

では、この要素のプレフィックスを決定するメソッドを作成しますか？

let screenPrefix = (() => {
    
    
  const prefix = {
    
    
    webkit: 'webkitTransform', // safari,chrome等
    Moz: 'MozTransform', // firefox
    O: 'OTransform', // Opera
    ms: 'msTransform', // ie
    standard: 'transform' // 默认
  }

  for (let key in prefix) {
    
    
    if (elementStyle[prefix[key]] !== undefined) {
    
    
      return key
    }
  }
  
  return false

3：ステップ3

プレフィックスを追加するcssスタイルを受け入れるメソッドをエクスポートします

export function addPrefix(style) {
    
    
  if (screenPrefix) {
    
     // 添加前缀返回的方法是false可能是出error了
    return false
  }
  if (screenPrefix === 'transform') {
    
     // 说明不用添加前缀，默认即可
    return style
  }
  // 驼峰命名
  return screenPrefix + style.charAt(0).toUpperCase() + style.substr(1)
}

4：ステップ4

プレフィックスを追加する必要がある場合は、呼び出す必要のあるファイルでaddPrefix（）メソッドを呼び出すだけです。

import {
    
     addPrefix } from 'common/js/dom'
const transform = addPrefix('transform')

上記は共有されるすべてのコンテンツです。
                                                                                   から-------タイヤ