javascript - 在悬停时保留和添加新变换(CSS/LESS)

Question

为了简单起见，我有一个 div，我默认使用 JS 代码进行旋转。但是后来我想添加一个 :hover 类，以便在将鼠标悬停在它上面时进行翻译。问题是，要么新的转换不适用，要么旧的转换不被保留。

我怎样才能让它发挥作用？顺便说一句，我正在使用 LESS，所以如果有 LESS 的解决方案，我会很高兴听到。

P.S. Angular 是根据JS中兄弟的个数生成的。也许我可以用 LESS 做一个旋转，然后在那里做一个 :hover？

document.getElementById("box").style.transform = "rotate(" + 40 + "deg)";

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 0.5s ease-in;
}
#box:hover {
  background-color: blue;
  transform: translate(50px) !important;
}

<div id="box">

</div>

Answer 1

使用 CSS/LESS 无法达到预期的效果。您必须使用 JavaScript 来生成动态样式。类似于下面的脚本可以完成您手头的任务:

var dynamic_styles = '';
var counter = 1;
$('.box').each(function() {
  $(this).attr('data-num', counter);
  dynamic_styles += '.box[data-num="' + counter + '"] {transform: rotate(40deg);}';
  dynamic_styles += '.box[data-num="' + counter + '"]:hover {transform: rotate(40deg) translate(50px);}';
  counter++;
});

$('head').append('<style>' + dynamic_styles + '</style>');

请在此处检查代码笔: http://codepen.io/anon/pen/LGzXEM

附言您可以使用动态计算的值更改旋转 40deg。