Chrome 中的剪辑路径和子动画

Question

所以我有一个使用剪辑路径显示的菜单，然后在其中链接从 0 到 1 不透明度设置动画。这工作了一段时间，直到 chrome 66。这在 Firefox 中仍然有效，所以我不确定这是 chrome 中的错误还是它应该是的方式并且 Firefox 没有被捕获向上。

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #f1f200;
  padding: 24px;
  display: none;
  transition: 500ms ease-out;
}

.mobile-menu {
  clip-path: circle(0 at 0% 0%);
  display: block;
}

.mobile-menu.active {
  display: block;
  clip-path: circle(200% at 0% 0%);
}

.mobile-menu.active a {
  animation-name: slideInDown;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  animation-delay: 160ms;
}

.mobile-menu a {
  color: #ff005d;
  animation-name: none;
  display: block;
  opacity: 0;
}

https://codepen.io/picard102/pen/zjoexP

那么我现在要如何复制 chrome 中的效果？

Answer 1

这是错误 https://bugs.chromium.org/p/chromium/issues/detail?id=823362

它在 Chrome 67 和 68 中工作正常。

Chrome 中的剪辑路径和子动画

Clip-Path and child animation in Chrome

css

clip-path