html - 可以对变换样式的属性使用过渡延迟吗？

Question

我有这样的财产

transition: top .5s, transform .5s .5s;

通常，为了获得更好的性能，我们应该只对动画使用变换和不透明度。

这样的动画可以吗？

transition: transform(translateY) .5s, transform(rotate) .5s .5s;

document.querySelector(".burger").onclick = function(e) {toggleActive(e)};

function toggleActive({target}) {
  target.classList.toggle('active')
}

span {
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.1s 0.5s;
}

span, span:before, span:after {
    background-color: #555;
    height: 5px;
    width: 35px;
    display: block;
    border-radius: 5px;
    position: absolute;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
  
span:before, span:after {
  content: '';
}

.basic:before, .basic:after {
    transition: transform 0.5s, top 0.5s 0.5s;
}
span:before {
    top: 200%;
}

span:after {
    top: -200%;
}

.basic.active {
    background-color: rgba(0, 0, 0, 0);
}

.basic.active:before {
    transform: rotate(-45deg);
}
.basic.active:after {
    transform: rotate(45deg);
}
.basic.active:before, .basic.active:after {
    top: 0;
    transition: top 0.5s, transform 0.5s 0.5s;
}

<span class="burger basic"></span>

在这种情况下，我确实使用了top属性。我想转换transform.

我不需要任何使用 JS 的补丁。唯一的问题是，是否存在这种可能性。我可能会补充一点，我最初使用的是 SCSS。

标签： htmlcsssass

Answer 1

如果您添加更多元素，您可以轻松地做到这一点。我还优化了代码以删除背景转换，因此我们只保留转换转换：

document.querySelector(".burger").onclick = function(e) {
  document.querySelector(".burger").classList.toggle('active')
};

.burger {
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s;
  background-color: #555;
  height: 5px;
  width: 35px;
  position: absolute;
  border-radius: 5px;
  cursor: pointer;
}

.burger div:before {
  content: '';
  display: block;
  height: 100%;
  background-color: #555;
  border-radius: 5px;
  transition: transform 0.5s;
}

.burger div {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: transform 0.5s 0.5s;
  transform: translateY(-200%);
}

.burger div:last-child {
  transform: translateY(200%);
}

.basic.active {
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.5s 0.5s;
}

.basic.active div {
  transform: translateY(0%);
  transition: transform 0.5s;
}

.basic.active div:last-child::before {
  transform: rotate(90deg);
  transition: transform 0.5s 0.5s;
}

<div class="burger basic">
  <div></div>
  <div></div>
</div>