Изменение значения css свойства

146

10 января 2020, 15:10

Нужно что бы при клике значение translateX изменялось при каждом клике. Сейчас событие срабатывает один раз. Проблемма в том что я незнаю как передать значение css свойства в переменную...

<script type="text/javascript">
  $('.znSlickNav-prev').click(function () {
    $('.slick-track').css("transform","translateX(-"+333+"px)");
  })
</script>

Нужно что бы при каждом клике translateX увеличивалось на 333px

Answer 1

var tr = 0;
$('.znSlickNav-prev').click(function(){
  tr += 333;
  $('.slick-track').css("transform","translateX(-"+tr+"px)");
});

Подключи jQuery перед скриптом.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Проблема подхода из принятого ответа в том, что присвоение css-свойству transform значения translate "ломает" другие трансформации элемента (например, поворот).

Есть более гибкий способ. Современные браузеры поддерживают интерфейс DOMMatrix, который предназначен как раз для работы с трансформациями.
Подробнее о нем можно почитать например, на MDN(en).

Или, можно использовать такие вот простые классы-помощники, меняющие значение трансформа через matrix():

class CssTransform2d { 
  constructor(element) { this.el = element; } 
  get matrix() { 
    let tm = getComputedStyle(this.el).getPropertyValue('transform').match(/\((.*)\)/);  
    return (tm ? tm[1] : '1,0,0,1,0,0').split(/,\s*/).map(v => +v);  
  } 
  set matrix(v)     { this.el.style.transform = `matrix(${v.join(', ')})`; } 
  get translate()   { return this.matrix.slice(-2); } 
  set translate(xy) { this.matrix = [...this.matrix.slice(0, 4), ...xy]; } 
  get translateX()  { return this.matrix[4]; } 
  set translateX(v) { this.matrix = [...this.matrix.slice(0, 4), v, this.matrix[5]]; } 
  get translateY()  { return this.matrix[5]; } 
  set translateY(v) { this.matrix = [...this.matrix.slice(0, 4), this.matrix[4], v]; } 
} 
 
/*--------------------- использование ---------------------*/ 
const ct  = new CssTransform2d($('#box')[0]);  
console.log(ct.matrix.join(', '));  
 
$('.btn-move').click(function () { 
  const $this = $(this);  
  let [x, y] = ct.translate;  
  switch ($this.data('direction')) { 
    case '<': x -= 30; break;  
    case '>': x += 30; break;  
    case '∧': y -= 30; break;  
    case '∨': y += 30;  
  } 
  ct.translate = [x, y];  
  console.clear() || console.log(ct.matrix.join(', '));  
});

.btn-move { width: 2rem; height: 1.7rem; } 
.btn-move::after { content: attr(data-direction); display: inline; } 
   
#btns { position: relative; z-index: 99; } 
 
#box { 
  width: 3rem; height: 3rem;  
  background: #4d4;  
  transition: transform 0.15s linear;  
  transform: translate(10rem, 20vh) rotate(45deg); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="btns"> 
  <button class="btn-move" data-direction="&lt;"></button> 
  <button class="btn-move" data-direction="∧"></button> 
  <button class="btn-move" data-direction="∨"></button> 
  <button class="btn-move" data-direction="&gt;"></button> 
</div> 
<div id="box"></div>

(код в примере работает только с 2D-трансформом, тогда как DOMMatrix поддерживает и трехмерные. Плюс, стандартный интерфейс предлагает гораздо больше возможностей, и написан он не на коленке :))

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Откуда берутся значения функции

Не пойму, как так получается, что значением аргумента year становятся значения переменных carYear и personYear? Распишите пошагово, пожалуйста

128

javascript

Скрыть дочернии элементы при клике

Нужно при клике скрыть все дочернии элементы класса tp-revslider-slidesli и показать все дочернии элементы класса tp-revslider-slidesli-2, делал так не получилось:

137

javascript

Изменение размеров окна в приложении в зависимости от устройства

В Play Market(и не только, но возьмём его) есть приложения(на ПК это сайты)Устройства которые их скачивают имеют разные размеры экрана

187

MySQL

MySQL - нет формата SQL при экспорте таблицы

Версия сервера - 56

159