在悬停时保留和添加新的变换 (CSS/LESS)答案

【问题标题】：Preserving and adding new transform on hover (CSS/LESS)在悬停时保留和添加新的变换 (CSS/LESS)
【发布时间】：2016-01-17 17:07:29
【问题描述】：

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

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

P.S. 角度是根据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>

【问题讨论】：

这就是 CSS 的工作方式，Less 在这里无济于事。您需要找到现有的转换并将新转换附加到它。
这里有个建议，不要用JS修改style属性，而是用JS写到
结果应该是transform: translate(50px) rotate(40deg);，如果只在悬停时应用translate，其他属性会丢失。
@SaqibAmin，是的。确实，这是一个很好的方法，我正在考虑这个问题。但我希望 LESS 有另一种方法。
@mch，我知道，就是这样。

标签： javascript css transform

【解决方案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。

【讨论】：

问题是，如果我的页面发生变化，即boxes的数量，这个<style>标签会保留。
您可以在触发此类可能更改框数的事件时重新生成样式标签
这会很复杂。我宁愿用 JS 在每个 .box 上收听悬停事件，并相应地调整 el.style.transform。