javascript - 如何在FF和IOS中使用剪切路径多边形

我尝试编写一个小插件，以更自然的方式打开模式框，因此，我决定为clip-path属性设置动画。

现在，此代码仅适用于chrome:
http://codepen.io/meodai/pen/GgGzYo?editors=011

看起来像clip-path属性中的firefox does not support polygon()。 Safari和移动Safari也确实为此感到困扰。

是否有类似的简单方法可以在Firefox和Safari以及Mobile Safari中使此工作正常进行？知道我该如何解决这个问题吗？

这是一个工作示例:

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function(){
  var coords, coordArray, coordsString;

  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
  ];


  coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';

  $ov.css({
    '-webkit-clip-path': coordsString,
    'clip-path': coordsString
  });

  setTimeout(function(){
    $ov.addClass('show');
  },50);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },100);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },180);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },260);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,0 100%)';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },340);

  // reverse
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1500);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1580);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1640);
  setTimeout(function(){
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1740);



   setTimeout(function(){
    $ov.removeClass('show');
  },2000);

});

body, html {
  background: silver;
}

.grid {
  float: left;
  width: 25%;
  height: 25vw;
  box-shizing: border-box;
  position: relative;
}

.inner {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #ddd;
  -webkit-transition: background-color 111ms;
          transition: background-color 111ms;
}
.inner:hover {
  background: #fff;
}

.overlay {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  pointer-events: none;
  box-sizing: border-box;
  padding: 20px;
}

.overlay.show {
  opacity: 1;
  will-change: clip-path;
  -webkit-transition: clip-path 200ms;
          transition: clip-path 200ms;
  -webkit-transition: -webkit-clip-path 200ms;
          transition: -webkit-clip-path 200ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="overlay"></div>

最佳答案

您可能想看看svg，因为您可以为多边形的点设置动画并将其变形为所需的形状。

DEMO

DEMO With images and titles

该演示使用snap.svg库制作正方形并在click事件上对其进行操作。
目前尚未完成，并且存在一些错误，但是您应该了解一下。

我完全重构了代码，这要感谢rlemon帮助我更好地进行了改进。我在最新的FF和Chrome浏览器中对其进行了测试，一位用户报告说它可以在装有Safari的iPhone上使用。

这些元素是用多边形制成的，在单击时会添加一个正方形多边形，并且它的点将逐一进行动画处理以显示特征。

var items = [
  [ 1, 1,24, 1,24,24, 1,24],
  [26, 1,49, 1,49,24,26,24],
  [51, 1,74, 1,74,24,51,24],
  [76, 1,99, 1,99,24,76,24],
  [ 1, 26,24, 26,24,49, 1,49],
  [26, 26,49, 26,49,49,26,49],
  [51, 26,74, 26,74,49,51,49],
  [76, 26,99, 26,99,49,76,49],
  [ 1, 51,24, 51,24,74, 1,74],
  [26, 51,49, 51,49,74,26,74],
  [51, 51,74, 51,74,74,51,74],
  [76, 51,99, 51,99,74,76,74],
  [ 1, 76,24, 76,24,99, 1,99],
  [26, 76,49, 76,49,99,26,99],
  [51, 76,74, 76,74,99,51,99],
  [76, 76,99, 76,99,99,76,99]
],
    item = [],points= [],i, p=[],open = 0,
    s = Snap().attr({viewBox:"0 0 100 100","fill":"#585247"});

function runAnimations(el) {
  if( !animationSequences.length ) return;
  var sequence = animationSequences.shift();
  el.animate(sequence,120,mina.linear, runAnimations.bind(null,el));
}


function register(x,i) {
  item[i] = s.polygon(items[i]);
  item[i].click(function () {
    var featured = s.polygon(items[i]).attr({"fill":"#585247"});
    p = items[i];
    animationSequences = [
      {"points": p[0]/2+","+p[1]/2+","+p[2]+","+p[3]+","+p[4]+","+p[5]+","+p[6]+","+p[7]},
      {"points": p[0]/3+","+p[1]/3+",100,0,100,100,"+p[6]+","+p[7]},
      {"points": p[0]/4+","+p[1]/4+",100,0,100,100,0,100"},
      {"points": "0,0,100,0,100,100,0,100"},
    ];
    runAnimations(featured);
    featured.animate({"fill":"#ACA696"},300);
    featured.click(function(){
      this.stop().animate({"points":p,"fill":"#585247"},200,mina.linear,featured.remove);
    });
  });
}
items.forEach(register);

*{margin:0;padding:0;}
body{background:#E3DFD2;}
svg{display:block;}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>