Chrome中的剪辑路径和子动画

时间:2018-04-28 12:32:46

标签: css clip-path

所以我有一个菜单,使用剪辑路径显示,然后在其中,链接从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中复制效果呢?

1 个答案:

答案 0 :(得分:1)

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

它在Chrome 67和68中运行良好。