Рубрики
Без рубрики

Получение ценностей CSS Translate с JavaScript

Вы можете получить значения CSS Translate в JavaScript путем разбора 2D и 3D Matrices. Вот как это сделать, а что вы должны следить за

Автор оригинала: Zell Liew.

Как вы получаете translatex , Перевести или Translatez Значение в JavaScript?

Оказывается, вам нужно прочитать преобразование матриц. Но это может быть довольно легко.

Матрицы

Браузеры поверните трансформировать значения в 2D или 3D Матрицы в зависимости от того, какие преобразования вы применяли.

  • Браузеры создают 3D Матрицы, если вы применяете 3D-преобразования (X, Y, Z оси).
  • Браузеры создают 2D Матрицы, если вы применяете 2D преобразования (только х, оси Y).

Мы можем получить матрицу через JavaScript с GetComputedstyle Отказ

const style = window.getComputedStyle(element)
const matrix = style.transform || style.webkitTransform || style.mozTransform

Давайте посмотрим на некоторые примеры:

.two-d {
  transform: translateX(10px) translateY(20px);
}
2D Matrix трансформации
.three-d {
  transform: translateX(10px) translateY(20px) translateZ(30px);
}
Матрица трансформации 3D

2D VS 3D Matrices

Обратите внимание на значения матрицы выше. Вы можете заметить это:

2D матрица

2D Matrix имеет 6 значения.

  1. 5-е значение – переводчик
  2. 6-е значение – переводитель

3D матрица

3D Matrix имеет 16 значения.

  1. 13-е значение – переводчик
  2. 14-е значение – переводитель
  3. 15-е значение – преобразователь

Получение ценностей Translate

Как только мы узнаем шаблон, извлечение значений легко. Во-первых, нам нужно знать, с какой матрицей мы имеем дело.

const style = window.getComputedStyle(element)
const matrix = style.transform || style.webkitTransform || style.mozTransform

// Can either be 2d or 3d transform
const matrixType = matrix.includes('3d') ? '3d' : '2d'

Если матрица 2D мы можем получить ценности translatex и Перевести такие значения, как это:

const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')
if (matrixType === '2d') {
  const x = matrixValues[4]
  const y = matrixValues[5]
}

Если матрица 3D мы можем получить ценности translatex , Перевести и Translatez такие значения, как это:

const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')
if (matrixType === '3d') {
  const x = matrixValues[12]
  const y = matrixValues[13]
  const z = matrixValues[14]
}

Я упаковал это в хорошую функцию для нас, чтобы использовать.

/**
 * Gets computed translate values
 * @param {HTMLElement} element
 * @returns {Object}
 */
function getTranslateValues (element) {
  const style = window.getComputedStyle(element)
  const matrix = style.transform || style.webkitTransform || style.mozTransform

  // No transform property. Simply return 0 values.
  if (matrix === 'none') {
    return {
      x: 0,
      y: 0,
      z: 0
    }
  }

  // Can either be 2d or 3d transform
  const matrixType = matrix.includes('3d') ? '3d' : '2d'
  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')

  // 2d matrices have 6 values
  // Last 2 values are X and Y.
  // 2d matrices does not have Z value.
  if (matrixType === '2d') {
    return {
      x: matrixValues[4],
      y: matrixValues[5],
      z: 0
    }
  }

  // 3d matrices have 16 values
  // The 13th, 14th, and 15th values are X, Y, and Z
  if (matrixType === '3d') {
    return {
      x: matrixValues[12],
      y: matrixValues[13],
      z: matrixValues[14]
    }
  }
}

Используй это:

const {x, y, z} = getTranslateValues(element)

💥.

Только простые преобразования

gettranslatevalues Работает только если Перевести объявлен перед другими преобразованиями. Это связано с тем, что ценности преобразования стоят друг на друга.

Давайте объясним это при примере 2D Matrix.

Допустим, у вас есть этот элемент.

.element {
  transform: translateX(10px) translateY(20px);
}
2D Matrix трансформации

Вы уже знаете это:

  • 5-й номер 10 что такое же значение, как переводчик
  • 6-го числа – 20 , что такое же значение, как переводитель

Теперь давайте добавим вращать Преобразование позади translatex и Перевести Отказ

.element {
  transform: translateX(10px) translateY(20px) rotate(10deg);
}
Перевести, затем вращать.

Там нет разницы в 5 и 6-м значениях:

  • 5-й номер 10 что такое же значение, как переводчик
  • 6-го числа – 20 , что такое же значение, как переводитель

Но посмотрите, что произойдет, если вы вращать первый.

.element {
  transform: rotate(10deg) translateX(10px) translateY(20px);
}
Поверните, затем переведите.
  • 5-й номер 6.37511 Что не то, что мы писали за переводчик
  • 6-го числа – 21.4326 , что не то, что мы написали за переводитель

Просто обратите внимание на это!

Получение других ценностей преобразования в JavaScript

У меня не было возможности иметь дело с масштаб , коситься и вращать Тем не менее, но мне было любопытно. Так что я гугул и нашел некоторые ответы:

Я считаю, что расчеты работают с отдельными преобразованиями. Я не уверен, что они работают, если преобразования сложены друг на друга. (Например, Skew -> Поверните дает очень разное значение по сравнению с Rotate -> перекоснуть ).

Держите это просто, я думаю!

Полезные репозиторий фрагментов JavaScript

Я добавил этот код на репозиторий GitHub, который содержит JavaScript-фрагменты, которые я нашел полезным. Вы можете быть заинтересованы в Проверяя это Отказ

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.