Question

所以我有这个动画（在悬停时触发）。 - ＆GT; Morph Animation on CodePen

在Safari中工作非常流畅，它在Chrome中令人惊讶地震撼但它在Firefox中根本不起作用。

如果有人能指出我正确的方向，我将不胜感激。这在某种程度上是否可以解决？

代码：

HTML：

<div class="shape-container">
  <div class="shape"></div>
</div>

SCSS：

$globalWidth: 48px;
$globalHeight: 48px;

$zenGreen: #38CA4B;
$zenRed: #F32847;

@mixin transition($duration) {
  transition: all $duration cubic-bezier(0.785, 0.135, 0.150, 0.860);;
}

@mixin shapeStroke() {

}

/* Center the demo */
html, body { height: 100%; background: #008ace;}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shape-container {
  width: $globalWidth;
  height: $globalHeight;
  @include transition(600ms);
  &:hover {
    @include transition(600ms);
    transform: rotateZ(-180deg);
    .shape {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: scaleX(1);
      &:before {
        clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
        background: $zenGreen;
      }
      &:after {
clip-path: polygon(25% 48%, 43% 62%, 75% 20%, 89% 31%, 75% 49%, 61% 68%, 45% 87%, 14% 61%);
        transform: rotateZ(180deg) translateY(8px);
      }
    } 
  }
}

.shape {
  width: $globalWidth;
  height: $globalHeight;
  background: white;
  clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
  @include transition(600ms);
  transform: scaleX(1.2);
  position: relative;
  &:before {
    @include transition(600ms);
    content: "";
    display: block;
    background: $zenRed;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 10%, 50% 10%, 92% 95%, 8% 95%);
  }
  &:after {
    @include transition(600ms);
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 20px;
    left: 12px;
    z-index: 1000;
    clip-path: polygon(41% 10%, 57% 10%, 57% 50%, 41% 50%, 41% 57%, 56% 57%, 57% 73%, 41% 73%);
    background: white;
  }
}

Answer 1

截至目前，剪辑路径的aren't that well supported尚未完成。我自己遇到了很多问题，而且我没有针对clip-path的所有问题的解决方案。我做知道的是，overflow: hidden有时可以节省一天。嗯，在这种情况下50％。

选项1：将overflow: hidden添加到.shape。此时，“三角到盒子”动画在Chrome中运行良好。

选项2：从.shape-container:hover .shape:after中删除转换。此时，“感叹号到复选标记”动画将正常工作。

缺点是这两者由于某种原因不能组合。选项2没有给出正确的结果，尽管你可以通过在旋转中心周围硬编码测谎点180度来旋转复选标记180deg的形状（然后你可以向下移8px，因为这也是你翻译的内容）。

但我确实有一个解决方案。在过去的几个小时里，我一直在努力用那些广泛支持的东西重新制作你的笔。您可以查看this Fiddle。

我已将包含元素更改为内部带有多边形的svg元素，该元素始终保持相同的笔触宽度。它的动画由一小段JavaScript触发。此外，感叹号和复选标记的动画与您的完全不同，但我认为它看起来很整洁。

虽然这是一个迟到的答案，但我希望它仍能帮到你。

CSS“剪辑路径”变形动画在Chrome和Firefox中不起作用，在Safari中完美运行

1 个答案: