CSS transition scale（）-怪异的延迟

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

问题

您看到的不是“浏览器错误”，而是对两个组合缩放比例的计算原理的误解。

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

由于我们要使内部元素的最终比例保持恒定，因此对于所有时间参数，（比例放大函数）×（比例缩小函数）= 1。不幸的是，如果我们进行乘法运算，结果得到一个平方函数（在我们的例子中是-¾x²+ 3x +¾）。这是您在过渡过程中可以看到的最终缩放比例的提高。为了避免这种情况，我们需要转换css规则中的scale(n)中的m，而不是转换scale(1/m)的值。不幸的是，即使我们使用了css变量，我们也无法做到这一点，因为这些变量（尚未）允许转换（请参见this答案）

为缓解这种情况，我们可以制作一个自定义的cubic-bezier计时函数，该函数将与平方函数相反，但我无法手动执行，也许cubic-bezier不能给出确切的计时函数所有时间值的曲线，特别是如果我们希望具有基本计时功能而不是linear的话。

解决方案

方法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>