是否可以在单个 CSS 过渡中结合 translateX/translateY 和缩放？

Question

我一直在玩 CSS 转换的循环（在 this article 之后）。

过渡本身可以分为 4 个（循环）阶段：
shrinked2=>expanded=>expanded2=>shrinked
这些状态由 4 个类表示：
shrinked2 - stateOne
expanded - stateTwo
expanded2 - stateThree
shrinked2 - stateFour

最初，我正在通过 id 设置元素的宽度和高度，以百分比形式进行转换。然后，为了触发转换，我通过上面列出的状态类更改transform: scale。

就他而言，它基本上对我来说很好，这里是demonstration on JSFiddle。

现在，作为下一步，我想在页面上垂直和水平地居中过渡元素（并将其保留在那里）。我通过将以下内容添加到元素 id 来做到这一点：
top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); 以及在状态类中为每个transform: 附加translateX(-50%) translateY(-50%)。现在这种方式 scale 不会应用于元素（即在转换时不会更改大小） - 只有 background 属性受到影响，转换只发生一次（即不再循环），就好像 transitionend 是从未被解雇。 这是the result on JSFiddle。将预期的属性名称（在loopTransition 函数中）更改为background、has not effect (JSFiddle)。

我完全知道有lots 的other 方法来居中元素。我想了解的是：

1. 是否可以在同一个 CSS 过渡中组合 translateX/translateY 和 scale（如果是，我做错了什么？）
2. 如果以top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); 为中心的元素与一般过渡或特别是scale 不兼容，建议使用什么方法？

var the_circle = document.getElementById('circle');
the_circle.addEventListener("transitionend", loopTransition);

function startTransition() {
    var the_circle = document.getElementById('circle');
    if (the_circle.className === 'stateOne paused') {
        the_circle.style.transitionDuration = 1;
        the_circle.className = 'stateTwo animated';
    } else {
        stopTransition();
    }
}

function stopTransition() {
    var the_circle = document.getElementById('circle');
    the_circle.style.transitionDuration = "0.5s"
    the_circle.className = "stateOne paused"
}

function loopTransition(e) {
    var the_circle = document.getElementById('circle');
    if (e.propertyName === "transform") {
        if (the_circle.className.indexOf('paused') !== -1) {
            stopTransition()
        } else {
            if (the_circle.className === "stateTwo animated") {
                the_circle.style.transitionDuration = "1s";
                the_circle.className = "stateThree animated";
            } else if (the_circle.className === "stateThree animated") {
                the_circle.style.transitionDuration = "1s";
                the_circle.className = "stateFour animated";
            } else if (the_circle.className === "stateFour animated") {
                the_circle.style.transitionDuration = "1s";
                the_circle.className = "stateOne animated";
            } else if (the_circle.className === "stateOne animated") {
                the_circle.style.transitionDuration = "1s";
                the_circle.className = "stateTwo animated";
            }
        }
    }
}

#circle {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 10%;
    padding-top: 10%;
    border-radius: 50%;
    transition: all 1s;
}

.stateOne {
    background: #800080;
    transform: scale(1.0001, 1.0001) translateX(-50%) translateY(-50%);
}

.stateTwo {
    background: #ffe6ff;
    transform: scale(2, 2) translateX(-50%) translateY(-50%);
}

.stateThree {
    background: #ffe6ff;
    transform: scale(2.0001, 2.0001) translateX(-50%) translateY(-50%);
}

.stateFour {
    background: #800080;
    transform: scale(1, 1) translateX(-50%) translateY(-50%);
}

<div id='circle' class="stateOne paused" onclick=startTransition()></div>

Answer 1

1. 在 CSS 中，#id 选择器优先于 .class 选择器。因此，.state 类中的 transform 声明永远不会被应用。解决方案是：

   • 增加规则的specificity，即#circle.stateTwo，

   • 将!important 标志添加到您的声明中：

     transform: scale(2, 2) translate(-50%, -50%) !important;
     

     但是应该避免这种情况，并尽可能使用第一种方法。

2. 一种不与动画混合的更简单的居中元素方法是使用flexbox：

   .flex-container {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100vw;
     height: 100vh;
   }
   
   #circle {
     width: 10%;
     padding-top: 10%;
     border-radius: 50%;
     transition: all 1s;
   }
   
   .stateOne {
     background: #800080;
     transform: scale(1.0001, 1.0001);
   }
   
   .stateTwo {
     background: #ffe6ff;
     transform: scale(2, 2);
   }
   
   .stateThree {
     background: #ffe6ff;
     transform: scale(2.0001, 2.0001);
   }
   
   .stateFour {
     background: #800080;
     transform: scale(1, 1);
   }