0

所以我有这个动画（悬停时触发）。--> 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;
  }
}
4

1 回答 1

1

到目前为止，剪辑路径还没有得到很好的支持。我自己也遇到了很多问题，而且我没有解决所有剪辑路径问题的方法。我所知道的是，这overflow: hidden有时可以挽救局面。好吧，在这种情况下是 50%。

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

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

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

不过，我确实有解决方案。在过去的几个小时里，我一直在尝试用得到广泛支持的东西来改造你的笔。你可以看看这个 Fiddle。

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

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

于 2016-01-08T01:30:50.527 回答