CSS过渡规模（） - 奇怪的延迟

Question

运行下面的代码段 - 单击圆圈以切换动画。应该发生的是，孩子应该看起来好像它没有像父容器那样移动。

这是通过按照父项按比例缩放的比例缩小子组件来实现的（父级缩放为4，子级缩放为0.25）。

当动画完成时，比例是正确的，但是在动画期间看起来它们不是一致地缩放。

这几乎就像父母先缩放，然后一旦完成儿童尺度。

这是某种浏览器限制吗？或者我做错了什么？

谢谢！

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  transition: transform 1s;
  cursor: pointer;
  border: 1px solid black;
}

.outer--active {
  transform: scale(4) translate(-50%, -50%);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
  transform-origin: top left;
  transition: transform 1s;
}

.outer--active .inner {
  transform: scale(0.25) translate(-50%, -50%);
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 1

The problem

你看到的不是“浏览器错误”，而是误解了两个组合缩放的计算方式。

为简单起见，我们假设转换函数是linear（而不是ease，这是默认的计时函数）。在这种情况下，两个尺度的图表如下：

由于我们希望内部元素的最终比例保持不变，因此所有时间参数的（向上扩展函数）×（向下缩小函数）= 1。不幸的是，如果我们进行乘法，那么我们得到一个平方函数（在我们的例子中它是-¾x²+ 3x +¾）。这是您在转换过程中可以看到的最终缩放比例。为了避免这种情况，我们需要在scale(n) css规则中缩放m，而不是转换scale(1/m)值。不幸的是，我们不能这样做，即使我们使用了css变量，因为它们（还）不允许转换（参见this回答）

为了减轻这种情况，我们可以制作一个定制的cubic-bezier计时函数，它将是方函数的倒数，但是我无法手动执行，并且可能cubic-bezier不能给出所有时间值的精确曲线，特别是如果我们想要除了linear之外还有基本计时功能。

The solution

方法1：我们可以改变外部div的尺寸，而不是缩放，如下所示：

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  transition: all 1s;
  cursor: pointer;
  border: 1px solid black;
}

.outer--active {
  width: 400px;
  height: 400px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
  transform-origin: top left;
  transition: transform 1s;
}

<div class="outer">
  <div class="inner"></div>
</div>

优点：保留当前的html标记结构

缺点：由于有关子像素过渡平滑的浏览器错误（例如firefox bug report），动画不稳定

---

方法2：使用剪贴蒙版进行圆形剪切效果，为边框添加div：

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  cursor: pointer;
}

.rim {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    border: 1px solid black;
    transition: all 1s;
    transform-origin: top left;
}

.outer--active .rim {
    transform: scale(4)  translate(-50%, -50%);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
  transform-origin: top left;
  transition: all 1s;
  clip-path: circle(50px at 200px 200px);
}

.outer--active .inner {
  clip-path: circle(200px at 200px 200px);
}

<div class="outer">
  <div class="inner"></div>
  <div class="rim"></div>
</div>

优点：顺利扩展

缺点：需要为圆形边框/边框添加另一个html标记。轮辋有时看起来与内部图像脱节。

Answer 2

这里有类似的想法，就像其他答案一样，你只需要一个元素即可。

增加宽度/高度。

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: calc(100px * var(--s,1));
  height: calc(100px * var(--s,1));
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center ;
  transition: all 1.5s;
  cursor: pointer;
  border: 1px solid black;
}

.outer--active {
  --s:4;
}

<div class="outer">
</div>

考虑clip-path我添加一个radial-gradient创建边界

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 400px;
  height: 400px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(farthest-side,transparent calc(100% - 3px),#000 100%),
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg');
  background-size:40% 40%,auto;
  background-position:center;
  transition: all 1.5s;
  cursor: pointer;
  -webkit-clip-path: circle(20% at 50% 50%);
  clip-path: circle(20% at 50% 50%);
}

.outer--active {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  background-size:100% 100%,auto;
}

<div class="outer">
</div>

你也可以只考虑radial-gradient，但点击的区域会更大，你将没有透明度：

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 400px;
  height: 400px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(farthest-side,transparent calc(40% - 3px),#000 40%,#fff calc(40% + 1px)),
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg');
  background-size:100% 100%,auto;
  background-position:center;
  transition: all 1.5s;
  cursor: pointer;
}

.outer--active {
  background-size:240% 240%,auto;
}

<div class="outer">
</div>