如何使用 Javascript/jQuery 设置 css 动画类变量？

Question

我一直在将一些 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);
});

提前感谢您提供的任何见解和帮助！

Answer 1

我认为不可能像您在 CSS 中尝试的那样将 CSS 变量与字符串连接：

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

最好用 JavaScript 来处理。

我认为您遇到的主要问题是动画运行后需要删除该类（以便它能够再次运行）。您可以使用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>

Answer 2

我认为添加类时突出显示的代码不会再次触发动画 - Existing Code

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>

Answer 3

我不确定我是否理解您的代码，但这是我的看法。
当用户点击时，您可以：
- 添加/删除 CSS 类。在这种情况下，您的 CSS 中已经设置了旋转值。
- 直接在 JavaScript 中旋转元素，例如通过动态设置 CSS 规则。

在我看来你是同时做这两件事？