Как установить переменную класса анимации CSS с помощью Javascript / jQuery? - PullRequest
Новая
       24

Как установить переменную класса анимации CSS с помощью Javascript / jQuery?

0 голосов
/ 25 августа 2018

Я реализовал некоторые CSS анимации как именованные классы, поэтому я могу легко добавлять / удалять любую связанную анимацию для элемента, делая его "доступным" для последующих или повторяющихся анимаций.

Япогрузить мои пальцы в использование CSS переменных, и это в настоящее время бросает меня за цикл.Я пытаюсь разрешить пользователю поворачивать активное изображение с шагом 90 градусов.В приведенном ниже примере кода я показываю только положительное событие нажатия кнопки 90.

*. Scss 

:root {
  --rotation-degrees: 90;
}

@keyframes rotate {
  100% {
    transform: rotate(var(--rotation-degrees)+'deg');
  }
}

.animation-rotate {
  --rotation-degrees: 90;
  // NOTE: I suspect the variable does not need to be supplied here, removing does 
  // not fix the issue, at least in isolation
  animation: rotate(var(--rotation-degrees)) 0.2s forwards;
}

*. Js 

let degrees = 0;
function rotate(degrees_increment) {
  degrees += degrees_increment;

  // The use of document.documentElement.style.setProperty is something I've seen 
  // used in many of the articles I've read as a means to "get to" the css variable, 
  // so I'm simply blindly copying it's use here   
  document.documentElement.style.setProperty('--rotation-degrees', degrees +'deg');
  $('#main-image-slider img').addClass('animation-rotate');
}

$('#rotate-right-button').on('click', function(event) {
  event.preventDefault();
  rotate(90);
});

Спасибозаранее за любые идеи и помощь, которую вы можете оказать!

Ответы [ 3 ]

0 голосов
/ 25 августа 2018

Я не думаю, что можно объединить переменную CSS со строкой, как вы пытались в вашем CSS: 

 transform: rotate(var(--rotation-degrees)+'deg');

Лучше справиться с этим с помощью JavaScript.

IПодумайте, что основная проблема, с которой вы столкнулись, заключается в том, что класс должен быть удален после запуска анимации (чтобы он снова мог запускаться).Это можно сделать с помощью прослушивателя событий animationend .

Демонстрация ниже: 

const DIV = $('div');
const BUTTON = $('#rotate-right-button');
const SPAN = $('#variable-value');
const PROPERTY_NAME = '--rotation-degrees';
const DEG = 'deg';
const ROOT = document.documentElement;
const ElementClass = {
  ROTATE_ANIMATION: 'animation-rotate'
}
const ROTATION_VALUE = 90;
const Event = {
  CLICK: 'click',
  ANIMATION_END: 'animationend'
}

let degrees = 0;

function rotate(degrees_increment) {
  degrees += degrees_increment;
  ROOT.style.setProperty(PROPERTY_NAME, degrees + DEG);
  
  SPAN.html(`${PROPERTY_NAME}: ${degrees + DEG}`);
}

BUTTON.on(Event.CLICK, function() {
  DIV.addClass(ElementClass.ROTATE_ANIMATION);
  DIV.on(Event.ANIMATION_END, function(event) {
    $(this).removeClass(ElementClass.ROTATE_ANIMATION);
  });
  
  rotate(ROTATION_VALUE);
});
@keyframes rotate {
  100% {
    transform: rotate(var(--rotation-degrees));
  }
}

.animation-rotate {
  animation: rotate 0.2s;
}

div {
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button id="rotate-right-button">rotate</button>
<br>
<span id="variable-value"></span>
0 голосов
/ 25 августа 2018

Я думаю, что выделенный код больше не вызывает анимацию при добавлении класса - Существующий код 

var angle = 0;

$("#rotate").click(function(e){
	angle+= 90;
  document.documentElement.style.setProperty('--deg', angle+'deg');
  var el = $(".square");
  var newone = el.clone(true);           
 	el.before(newone);        
 $(".square:last").remove();
});
:root {
  --deg: 180deg;
}

@keyframes rotate {
 100% {transform: rotate(var(--deg));}
} 
.animation-rotate {
  animation: rotate 0.9s forwards;
}

.square {
  background: hsl(300, 90%, 52%);
  width: 15vmin;
  height: 15vmin;
  border-radius: 10%;
  margin: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="square animation-rotate"></div>
  <div>
    <button class="btn btn-sm btn-success" id="rotate">Rotate</button>
  </div>
</div>
0 голосов
/ 25 августа 2018

Я не уверен, что понимаю ваш код, но вот мое мнение о нем.
Когда пользователь нажимает, вы можете:
- добавить / удалить класс CSS.В этом случае значения для поворота уже установлены в вашем CSS.
- поверните элемент непосредственно в JavaScript, например, путем динамической установки правила CSS.

Мне кажется, что вы делаете оба одновременно?

...