如何将多个转换声明应用于一个元素？

Question

我有一个包含两个类的元素，一个叫做“rotate”，可以将元素旋转 360 度，另一个叫做“doublesize”，可以将元素缩放到正常大小的 2 倍：

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

我猜这不起作用，因为这些类会覆盖彼此的 transform 属性？

我知道我可以在一条 CSS 规则中轻松做到这一点，例如：

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

但如果可能的话，我希望能够单独应用每个类。

Answer 1

使用 CSS 变量可以进行这种分离。这个想法是使用 CSS 变量在元素内部链接尽可能多的转换，然后单独更新每个变量：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1, ) /* we need a space as fallbak*/
    var(--t2, ) 
    var(--t3, );
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}

<div class="transitionease doublesize rotate "></div>

Answer 2

你不能只使用 CSS 来做到这一点，但如果你不介意使用一些 jQuery，你可以附加这个效果：

var $elem = $('.cssDropPinImage');

$({deg: 0}).animate({deg: 360}, {
  duration: 600,
  step: function(now) {
    var scale = (2 * now / 360);
    $elem.css({
      transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
    });
  }
});

body {
  padding: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://via.placeholder.com/40" class="cssDropPinImage">

Answer 3

问题提示悬停时的缩放和旋转动画。解决此问题的另一种实用方法是重新排列 HTML 中的元素并将单独的变换应用于父元素和子元素，仅响应父元素上的悬停。

看起来像这样：

<div class="doublesize">
   <div class="rotate"></div>
</div>

.doublesize {
   transition: transform 1s ease;
}

.rotate {
   width: 100px; 
   height: 100px;
   background-color: red;   
   transition: transform 1s ease;
}

.doublesize:hover {
   transform: scale(2);    
}

.doublesize:hover .rotate {
   transform: rotate(360deg);
}

http://jsfiddle.net/n38csxy1/4/

我知道这与最初的设置相比有了很大的飞跃，但我希望这个观点对某人有所帮助。

Answer 4

我猜这不起作用，因为这些类会覆盖彼此的 transform 属性？

正确。作为级联工作方式的副作用，这是一个不幸的限制。

您必须在单个 transform 声明中指定这两个函数。您可以简单地将两个类选择器链接在一起，而不是为组合转换创建一个新类：

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

...但正如您所见，问题在于transform 属性而不是选择器。

---

预计这将在第 2 级变换中得到纠正，其中每个变换都已提升为 its own property，这将允许您通过单独声明它们来组合变换，就像您对 CSS 属性的任何其他组合一样。这意味着您可以简单地这样做：

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

...并利用级联而不是被它阻碍。不需要专门的类名或组合的 CSS 规则。

Answer 5

您当然可以组合多个动画，但不能通过组合 CSS 类。在这里查看第一个答案：combining multiple css animations into one overall animation

第一部分告诉你如何将动画与CSS结合一些参数（延迟，持续时间）：

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

当然，您首先需要定义动画。