将多个 CSS 转换减少到更少，同时保持位置

Posted 2023-03-05

【中文标题】将多个 CSS 转换减少到更少，同时保持位置

【英文标题】：Reduce multiple CSS transformations into fewer ones while maintaining position

【发布时间】：2017-09-29 09:53:50

【问题描述】：

我有一个带有大量 CSS 转换的元素，如下所示：

transform:  translateX( 0 )
            translateY( -1rem )
            rotate( 45deg ) 
            translateY( -2.5rem )
            rotate( 45deg )
            translateY( 5rem );

这些属性的顺序很重要，因为它们会影响元素最终在页面上的定位方式。我做了一些修改，并得出了相同的最终结果，但属性更少：

transform:  rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem );

您可以通过在下面的 sn-p 中注释和取消注释来测试这一点，以查看没有任何变化（转换等于相同的结果）。

我手动完成了这项工作，但花了一些时间才找到可以得到相同结果的确切转换。我正在尝试实时为数以千计的属性执行此操作...

有公式吗？有 CSS hack 吗？有没有一种简单的方法可以做到这一点 - 我不知道从哪里开始。哎哟

html 
  display: flex;
  height: 100%; 
  justify-content: center;
  align-items: center;


div 
  padding: 2.5rem 1rem;
  background-color: #4cc;
  color: #eee;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 0.25rem;
  
  transform:  translateX( 0 )
              translateY( -1rem )
              rotate( 45deg ) 
              translateY( -2.5rem )
              rotate( 45deg )
              translateY( 5rem );
  
/*transform:  rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem );*/

<div>
  transformed<br>element
</div>

编辑：您可能想知道：为什么要这样做！？那么这是我之前遇到的一个问题：Move transform-origin back to the center of the element in CSS。我这样解决了：Transforms are added...endlessly。但现在我有无穷无尽的变换，这就是我问的原因。

我有很多看起来像这样的动态变换：

【问题讨论】：

你想把它放在哪里？

@dippas 我只是希望它用更少的属性重写转换。位置可以在任何地方。我需要制作更少的属性，但将其保持在相同的位置和轮换位置。

如果你想要更少的代码，只需使用transform: rotate( 90deg ) translate( -2.8rem, 3.25rem );

感谢@AnuragDaolagajao。知道如何系统地执行此操作吗？

如果你使用getComputedStyle，它将返回一个matrix，这将是最短的代码......就像这样jsfiddle.net/LGSon/7g7gk99s......你可以遍历所有元素或所有类和收缩你的代码

【参考方案1】：

我不知道有什么其他方法，但想出了这个基于关键帧的“hacky”方法

更新：删除 jQuery

var currentAngle = 0,
  styleElment = document.createElement('style'), // create a style element to insert dynamic keyframes
  styleSheet,
  animState = 0; // toggle between 2 animation states

document.head.appendChild(styleElment);
styleSheet = styleElment.sheet;

// insert 2 default keyframes to the created stylesheet
styleSheet.insertRule("@keyframes rotate_1 0% transform: rotate(0deg); 100% transform: rotate(0deg)"); // at index 1
styleSheet.insertRule("@keyframes rotate_2 0% transform: rotate(0deg); 100% transform: rotate(0deg)"); // at index 0

document.getElementById("rotateBtn").onclick = function() 
  var newAngle = currentAngle + 30,
    transformCSS = "rotate(" + newAngle + "deg)",
    keyframe_1 = "transform: rotate(" + currentAngle + "deg);",
    keyframe_2 = "transform: rotate(" + newAngle + "deg);",
    animationCSS;

  styleSheet.cssRules[animState][0].style.cssText = keyframe_1; // sets value at 0%
  styleSheet.cssRules[animState][1].style.cssText = keyframe_2; // sets value at 100%

  if (animState === 0) 
    animState = 1;
    animationCSS = "rotate_2 1s";
   else 
    animState = 0;
    animationCSS = "rotate_1 1s";
  

  document.getElementById("container").style.animation = animationCSS;
  document.getElementById("container").style.transform = transformCSS;

  currentAngle = newAngle;
;

#container 
  width: 50px;
  height: 50px;
  background: red;

<div id="container"></div>
<button id="rotateBtn">Rotate</button>

【讨论】：

非常有帮助。谢谢！我会尝试在没有 jQuery 的情况下重新创建它。

其实很简单，因为我只使用jQuery来选择元素。所以大部分代码都可以使用纯js

我必须承认使用关键帧是一个很酷的主意。我正在看看这是否真的适用于我的项目

我删除了 jQuery，所以看看它是否适合你